GridLayout Layout.rowSpan and uniformCellHeights
-
Trying to use GridLayout Layout.rowSpan so that the yellow rectangles are one row high and the cyan rectangles are two rows high.
But this does not always work?
It works in this case:
import QtQuick import QtQuick.Layouts Window { width: 640 height: 480 visible: true title: qsTr("Hello World") GridLayout { anchors.fill: parent rows: 4 columns: 2 uniformCellWidths: true uniformCellHeights: true Rectangle { color: "cyan" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 2 Layout.row: 0 Layout.column: 0 } Rectangle { color: "cyan" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 2 Layout.row: 2 Layout.column: 0 } Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 0 Layout.column: 1 } Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 1 Layout.column: 1 } Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 2 Layout.column: 1 } } }
But not in this case. Without the third 1 row yellow rectangle, the second cyan rectangle is 1 row high instead of 2?
import QtQuick import QtQuick.Layouts Window { width: 640 height: 480 visible: true title: qsTr("Hello World") GridLayout { anchors.fill: parent rows: 4 columns: 2 uniformCellWidths: true uniformCellHeights: true Rectangle { color: "cyan" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 2 Layout.row: 0 Layout.column: 0 } Rectangle { color: "cyan" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 2 Layout.row: 2 Layout.column: 0 } Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 0 Layout.column: 1 } Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 1 Layout.column: 1 } /* Rectangle { color: "yellow" Layout.fillWidth: true Layout.fillHeight: true Layout.rowSpan: 1 Layout.row: 2 Layout.column: 1 } */ } }
Thank you
-- Peter -
I have the exact same erratic behavior on MacOS Sonoma. Not only the second cyan rectangle is one row high instead of two, but there's only three rows in total when there should be four. Especially when you explicitly declare four rows.
Commenting the second yellow rectangle instead gives me the intended behavior.Adding a
Component.onCompleted: console.log ("(id) : " + width + "x" + height)
for each rectangle displaysqml: 2 : 318x237 qml: 1 : 318x238
in the first case and
qml: 2 : 318x157 qml: 1 : 318x318
in the second case. The layout is clearly divided in three rows instead of four.
From the documentation of GridLayout, uniformCellHeights and uniformCellWidths are still in tech preview
Note: This API is considered tech preview and may change or be removed in future versions of Qt.
My advice is report the bug to Qt
-
I have the exact same erratic behavior on MacOS Sonoma. Not only the second cyan rectangle is one row high instead of two, but there's only three rows in total when there should be four. Especially when you explicitly declare four rows.
Commenting the second yellow rectangle instead gives me the intended behavior.Adding a
Component.onCompleted: console.log ("(id) : " + width + "x" + height)
for each rectangle displaysqml: 2 : 318x237 qml: 1 : 318x238
in the first case and
qml: 2 : 318x157 qml: 1 : 318x318
in the second case. The layout is clearly divided in three rows instead of four.
From the documentation of GridLayout, uniformCellHeights and uniformCellWidths are still in tech preview
Note: This API is considered tech preview and may change or be removed in future versions of Qt.
My advice is report the bug to Qt
Thank you, will contact support.
Workaround meanwhile is to implement my own GridLayout based on the following:
https://stackoverflow.com/a/61804867
Surprisingly simple and effective.
I then added support for rowSpacing and columnSpacing to that.