Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for for and if in GridLayout #358

Open
tronical opened this issue Jul 28, 2021 · 9 comments
Open

Add support for for and if in GridLayout #358

tronical opened this issue Jul 28, 2021 · 9 comments
Labels
a:compiler Slint compiler internal (not the codegen, not the parser) a:layouts Related to the layouting and positioning of the elements (mO,bT) enhancement New feature or request

Comments

@tronical
Copy link
Member

After #349 outlined that there were build errors - and those are fixed now - it would still be desirable to use if and for in grid layouts.

@tronical tronical added enhancement New feature or request a:compiler Slint compiler internal (not the codegen, not the parser) a:layouts Related to the layouting and positioning of the elements (mO,bT) labels Jul 28, 2021
@ogoffart
Copy link
Member

Some implementation instructions are in #574 (reply in thread)

We need to find a behavior of what happens to column and row detection when there is a if or a for.
for a if it could simply be like for a normal item which would just be hidden when false.

for a for we could force them to be a single row (or a single column?).

@tronical
Copy link
Member Author

I can think of four different ways of writing a "dynamic" grid layout:

  1. Create a variable number of rows:
GridLayout {
    for item in model: Row {
        // ...
    }
}
  1. Create a variable number of columns:
GridLayout {
    Row {
        for item in model: Column {
            // ...
        }
    }
}
  1. Create a variable number of columns:
GridLayout {
    for item in model: Rectangle {
        // ...
    }
}
  1. Mad-max:
GridLayout {
    for item[i] in model: Rectangle {
        row: i / 4;
        col: mod(i, 4);
    }
}

I guess (1)-(3) are special cases of (4), but is it even possible to implement that?

@FlorentBecker
Copy link

Would it be possible to have a StaticGridLayout with a fixed num_rows and num_cols which accepts for loops?

@ogoffart
Copy link
Member

Would it be possible to have a StaticGridLayout with a fixed num_rows and num_cols which accepts for loops?

Yeah, i think this would make sense to have these properties in the GridLayout.
we would also need a flow-direction property then.

@FlorentBecker
Copy link

Another solution would be to add a support for wrapping to HorizontalLayout and VerticalLayout (à la flex-wrap in css).

@Tastaturtaste
Copy link

Has there been any progress on this one? What is a possible workaround?

@ogoffart
Copy link
Member

Right now, the workaround is to use HorizontalLayout in VerticalLayout. Or to do the layouting "manually" using x, y bindings

@coufxr
Copy link

coufxr commented Jan 29, 2024

I'm sorry, I would like to know if there are other dynamic methods with better performance than using for in Rectangle? Or, could you tell me what the current best method is for dynamically drawing grids?

@petrostrak
Copy link

I'm sorry, I would like to know if there are other dynamic methods with better performance than using for in Rectangle? Or, could you tell me what the current best method is for dynamically drawing grids?

Would love that too, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a:compiler Slint compiler internal (not the codegen, not the parser) a:layouts Related to the layouting and positioning of the elements (mO,bT) enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

6 participants