Auto-reformatting rows based on number of QML Elements
-
I am trying to design a UI in which there will be a row of rectangular elements. I need some way to determine how many elements are in the row and if this number exceeds 5, to create a new row. I would just hard code it, but the problem is that it's future customers who will potentially be adding rectangles to the row and I want their only job to be adding the rectangles and not having to worry about creating new rows, etc. Is there a straightforward way to do this with QML? Or even some way to determine the number of elements within a row?
Thanks in advance.
-
You can use "Flow":http://qt-project.org/doc/qt-5/qml-qtquick-flow.html element.
-
bq. Or even some way to determine the number of elements within a row?
@
row.children.length
@ -
:-) Hope it helps. Happy coding :-)
-
Quick follow-up: Do you know of a way that I can determine the number of elements that exist in a single row of the Flow? I'm trying to figure out a way to have all the rectangles in the Flow centered within it. Right now, it looks like they naturally align to the left anchor.
-
As far as I know, you have no control over alignment in Flow. Maybe there is some way by - example - using attached properties, but I doubt it. You can probably achieve good results by carefully sizing the Flow element and it's contents, but that is not possible in all situations + quite fragile.
An alternative would be to use the "Grid":http://qt-project.org/doc/qt-5/qml-qtquick-grid.html element.
