Details
-
Suggestion
-
Resolution: Fixed
-
P2: Important
-
None
-
None
-
21455028f (dev), a60639e6f (6.5)
Description
Some people think that altering spans will increase the implicit size of a cell in a GridLayout (sometimes they try to use spans in order to achieve ratios), e.g:
Other times, they bind the items size hints to the parent layout e.g:
GridLayout { id: grid Rectangle { Layout.fillWidth: true Layout.preferredWidth: grid.width/3 } Rectangle { Layout.fillWidth: true Layout.preferredWidth: grid.width/3 } Rectangle { Layout.fillWidth: true Layout.preferredWidth: grid.width/3 } }
Which basically will form a circular dependency loop.
The documentation should have a section covering these things:
- Spans (and how unneeded spans and empty columns are ignored)
In a grid layout, empty rows or columns are ignored.
This means that you cannot use spans to specify stretch ratios. For instance:
GridLayout { columns: 4 width: 640 height: 480 Rectangle { color: "red" Layout.fillHeight: true Layout.fillWidth: true Layout.columnSpan: 1 } Rectangle { color: "green" Layout.fillHeight: true Layout.fillWidth: true Layout.columnSpan: 2 } Rectangle { color: "blue" Layout.fillHeight: true Layout.fillWidth: true Layout.columnSpan: 1 }
Some people assume the green Rectangle will become double as wide as the two other Rectangles. This assumption is wrong. (It might come from the fact that some believe that the rows and columns are distributed uniformly (i.e. having the same size)). However, the sizes of the rows and columns are not uniform - they depend on their contents, a column with a wide Button will have a larger preferredWidth than a column with a narrow Button. Similarly, a column with no items will have a size of 0, and will therefore be ignored. Therefore, you cannot add a span to an item in order for it to stretch differently.
- How the size hints of items can be (ab)used in order to specify size weights/ratios on each item
- How each item is aligned inside a cell (alignment gets first effective when the cell is larger than the items maximum size)
- Emphasize that size hints should never depend on "external" factors! (such as the above snippet).
Attachments
Issue Links
- relates to
-
QTBUG-98991 Add example to clear up common layout confusion
- Closed
-
QTBUG-109437 Rework Qt Quick Layouts overview documentation page
- Closed