QML Repeater for adding multiple Items to GridLayout? - qml

Question

How do you add multiple elements to a GridLayout using a single Repeater?
The GridLayout component ensures that rows and columns are sized to fit to the largest item in each cell, but if you want to populate it using a Repeater it seems impossible because a Repeater can only have one delegate.
There is another SO page asking how to do it without a wrapping Item, but I've never seen a wrapping Item solution and don't know why it would not be preferable.
How would you create the following?
Here is the model data for that image:
model: [ // JSON model
{
name: "February:",
types: [
{ name: "R-1", size: 24, color: "red" },
{ name: "O--2", size: 16, color: "orange" },
{ name: "Y---3", size: 8, color: "yellow" },
]
},
{
name: "March:",
types: [
{ name: "G-1", size: 24, color: "green" },
]
},
{
name: "April:",
types: [
{ name: "B-1", size: 24, color: "blue" },
{ name: "I--2", size: 16, color: "indigo" },
{ name: "V---3", size: 8, color: "violet" },
]
},
]

Answer 1

Add multiple Items as children to the Repeater's delegate Item and use JavaScript to reparent them into the GridLayout when the delegate Item is completed.
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.0
Window {
width: 360
height: 280
visible: true
title: qsTr("Repeater With Multiple Items")
function reparentChildren(source, target) {
while (source.children.length)
source.children[0].parent = target;
}
GridLayout {
id: grid
anchors.centerIn: parent
columns: 3
Repeater {
Item {
id: wrappingItem
Component.onCompleted: reparentChildren(this, grid)
Text {
Layout.alignment: Qt.AlignTop|Qt.AlignRight
Layout.rowSpan: modelData.types.length
text: modelData.name
}
Repeater {
model: modelData.types
Item {
Component.onCompleted: reparentChildren(this, wrappingItem)
Text {
Layout.alignment: Qt.AlignTop|Qt.AlignHCenter
text: modelData.name
}
Rectangle {
width: modelData.size; height: width
color: modelData.color
}
}
}
}
model: [ // JSON model
{
name: "February:",
types: [
{ name: "R-1", size: 24, color: "red" },
{ name: "O--2", size: 16, color: "orange" },
{ name: "Y---3", size: 8, color: "yellow" },
]
},
{
name: "March:",
types: [
{ name: "G-1", size: 24, color: "green" },
]
},
{
name: "April:",
types: [
{ name: "B-1", size: 24, color: "blue" },
{ name: "I--2", size: 16, color: "indigo" },
{ name: "V---3", size: 8, color: "violet" },
]
},
]
}
}
}