Is there a way to create an empty grid inside a QML GridLayout? - qml

Question

I am trying to create a periodic table using QML. In order to arrange the elements properly (I use GroupBoxes) , I need to have blank space/empty grids. I already tried inserting empty Items into the desired grids but the GridLayout would just ignore them. Using empty GroupBoxes leads to little squares being left at the position where nothing is supposed to be.
Yet my Code looks like this:
GridLayout {
id: grid
anchors.fill: parent //grid erstreckt sich nun über ganzes Window
columns: 18
rows: 9
GroupBox {
//GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
Layout.fillHeight: true
Layout.fillWidth: true
ColumnLayout {
Label {
Layout.alignment: Qt.AlignLeft
text: qsTr("1")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("H")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Hydrogen")
}
}
}
Repeater {
model: 16
GroupBox {
}
}
GroupBox {
//GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
Layout.fillHeight: true
Layout.fillWidth: true
ColumnLayout {
Label {
Layout.alignment: Qt.AlignLeft
text: qsTr("1")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("H")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Hydrogen")
}
}
}
Repeater {
model: 100
GroupBox {
//GroupBoxen werden maximal gestreckt in Höhe und Breite --> raum wird ausgefüllt
Layout.fillHeight: true
Layout.fillWidth: true
ColumnLayout {
Label {
Layout.alignment: Qt.AlignLeft
text: qsTr("1")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("H")
}
Label {
Layout.alignment: Qt.AlignHCenter
text: qsTr("Hydrogen")
}
}
}
}
Which lead to my application looking like this:
PeriodicTable qml

Answer 1

You can set the background of your placeholder GroupBox to be an Item like this
Repeater {
model: 16
GroupBox {
background: Item {}
}
}
or you could just use an Item directly like this
Repeater {
model: 16
Item {}
}