In the code below, when I use columnSpan and rowSpan for sizing, the rectangle with index 3 and 8 get different sizes.
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.15
Window {
visible: true
width: 640
height: 480
title: qsTr("GridLayout")
property var layoutStructure: [
{index: 0, columnSpan: 5, rowSpan: 2},
{index: 1, columnSpan: 5, rowSpan: 2},
{index: 2, columnSpan: 2, rowSpan: 1},
{index: 3, columnSpan: 2, rowSpan: 1},
{index: 4, columnSpan: 2, rowSpan: 1},
{index: 5, columnSpan: 2, rowSpan: 1},
{index: 6, columnSpan: 2, rowSpan: 1},
{index: 7, columnSpan: 2, rowSpan: 1},
{index: 8, columnSpan: 2, rowSpan: 1},
{index: 9, columnSpan: 2, rowSpan: 1},
{index: 10, columnSpan: 2, rowSpan: 1},
{index: 11, columnSpan: 2, rowSpan: 1}
]
GridLayout
{
anchors.fill: parent
rows: 4
columns: 10
columnSpacing: 0
rowSpacing: 0
Repeater
{
model: layoutStructure
Rectangle
{
Layout.rowSpan: modelData.rowSpan
Layout.columnSpan: modelData.columnSpan
Layout.preferredHeight: modelData.rowSpan
Layout.preferredWidth: modelData.columnSpan
Layout.fillHeight: true
Layout.fillWidth: true
color: "red"
border.width: 1
Label
{
text: index
anchors.centerIn: parent
}
}
}
}
}
While the rectangle with index 0 and 1 must be the same size, also the squares with index 2 to 11, but as you can see in the picture, their size is not the same.
0
A workaround, you can place an “invisible” row where columnSpan === 1:
property var layoutStructure: [
{c:0, r: 0, columnSpan: 5, rowSpan: 2},
{c:5, r: 0, columnSpan: 5, rowSpan: 2},
{c:0, r: 2, columnSpan: 2, rowSpan: 1},
{c:2, r: 2, columnSpan: 2, rowSpan: 1},
{c:4, r: 2, columnSpan: 2, rowSpan: 1},
{c:6, r: 2, columnSpan: 2, rowSpan: 1},
{c:8, r: 2, columnSpan: 2, rowSpan: 1},
{c:0, r: 3, columnSpan: 2, rowSpan: 1},
{c:2, r: 3, columnSpan: 2, rowSpan: 1},
{c:4, r: 3, columnSpan: 2, rowSpan: 1},
{c:6, r: 3, columnSpan: 2, rowSpan: 1},
{c:8, r: 3, columnSpan: 2, rowSpan: 1},
{c:0, r: 4, columnSpan: 1, rowSpan: 1},
{c:1, r: 4, columnSpan: 1, rowSpan: 1},
{c:2, r: 4, columnSpan: 1, rowSpan: 1},
{c:3, r: 4, columnSpan: 1, rowSpan: 1},
{c:4, r: 4, columnSpan: 1, rowSpan: 1},
{c:5, r: 4, columnSpan: 1, rowSpan: 1},
{c:6, r: 4, columnSpan: 1, rowSpan: 1},
{c:7, r: 4, columnSpan: 1, rowSpan: 1},
{c:8, r: 4, columnSpan: 1, rowSpan: 1},
{c:9, r: 4, columnSpan: 1, rowSpan: 1},
]
GridLayout
{
anchors.fill: parent
rows: 4
columns: 10
columnSpacing: 0
rowSpacing: 0
Repeater
{
model: layoutStructure
Rectangle
{
Layout.rowSpan: modelData.rowSpan
Layout.columnSpan: modelData.columnSpan
Layout.preferredHeight: modelData.r < 4 ? modelData.rowSpan * 100 : 0
Layout.preferredWidth: modelData.columnSpan * 100
Layout.fillHeight: true
Layout.fillWidth: true
Layout.row: modelData.r
Layout.column: modelData.c
color: "red"
border.width: 1
border.color: "black"
Label
{
visible: modelData.r < 4
text: index
anchors.centerIn: parent
}
}
}
}
1
I think this is a bug and to solve it, rowSpan and columnSpan should not be 0. When I give GridLayout rowSpan and columnSpan other than 0, the sizes are correct
1