How do I set row and column in a GridLayout when working with components? - qml

Question

I would like to fill a GridLayout with different Components which are depending on the modelData retrieved by a simple array model.
Item {
id: root
property var xdata: [
{"row": 1, "col": 1, "type": "A"},
{"row": 2, "col": 2, "type": "B"},
{"row": 3, "col": 3, "type": "C"}
]
GridLayout {
id: grid
width: 300
height: 300
rows: 3
columns: 3
Repeater {
model: root.xdata
delegate: Component {
Loader {
sourceComponent: switch(modelData["type"]) {
case "A": return test_a
case "B": return test_b
case "C": return test_c
}
}
}
}
Component {
id: test_a
Rectangle {
Layout.row: 1
Layout.column: 1
width: 100
height: 100
color: "red"
}
}
Component {
id: test_b
Rectangle {
Layout.row: 2
Layout.column: 2
width: 100
height: 100
color: "green"
}
}
Component {
id: test_c
Rectangle {
Layout.row: 3
Layout.column: 3
width: 100
height: 100
color: "blue"
}
}
}
}
This works just fine in automatic order, but when I set (staticly or dynamically) the components attached property Layout.row or Layout.column, nothing happens.

Answer 1

[EDIT/REWRITE]
Generally, when using Layout, it's best to use Layout.preferredWidth and Layout.preferredHeight instead of width and height. Also, I implemented DelegateChooser instead of Loader.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Page {
property var xdata: [
{"row": 1, "col": 1, "type": "A"},
{"row": 2, "col": 2, "type": "B"},
{"row": 3, "col": 3, "type": "C"}
]
GridLayout {
id: grid
width: 300
height: 300
Repeater {
model: xdata
delegate: DelegateChooser {
role: "type"
DelegateChoice { roleValue: "A"; TestA { } }
DelegateChoice { roleValue: "B"; TestB { } }
DelegateChoice { roleValue: "C"; TestC { } }
}
}
}
}
// TestA.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle {
Layout.row: modelData.row
Layout.column: modelData.col
Layout.preferredWidth: 100
Layout.preferredHeight: 100
color: "red"
}
// TestB.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle {
Layout.row: modelData.row
Layout.column: modelData.col
Layout.preferredWidth: 100
Layout.preferredHeight: 100
color: "green"
}
// TestC.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle {
Layout.row: modelData.row
Layout.column: modelData.col
Layout.preferredWidth: 100
Layout.preferredHeight: 100
color: "blue"
}
You can Try it Online!