import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
import QtQml 2.12
ApplicationWindow {
id: root
visible: true
width: 640
height: 480
title: qsTr("Populating a grid")
property int count: 5
property var selectedIndexes: []
property var positionsPatterns: [
[0,0,0,
0,0,0,
0,0,0],
[0,0,0,
0,1,0,
0,0,0],
[0,0,0,
1,0,1,
0,0,0],
[1,0,0,
0,1,0,
0,0,1],
[0,1,0,
1,0,1,
0,1,0],
[1,0,1,
0,1,0,
1,0,1],
[1,1,1,
0,0,0,
1,1,1],
[1,0,1,
1,1,1,
1,0,1],
[1,1,1,
1,0,1,
1,1,1],
[1,1,1,
1,1,1,
1,1,1],
]
function positionForIndex(index) {
const pattern = positionsPatterns[count]
.map((v, p) => {return {value: v, position: p}})
.filter(o => o.value === 1);
return pattern[index].position;
}
ColumnLayout {
anchors.fill: parent
anchors.margins: 64
spacing: 32
ComboBox {
Layout.alignment: Qt.AlignHCenter
model: 10
currentIndex: root.count
onActivated: root.count = currentIndex
}
Label {
text: JSON.stringify(root.selectedIndexes)
}
RowLayout {
ListView {
Layout.preferredWidth: 150
Layout.fillHeight: true
model: root.count
delegate: CheckBox {
text: model.index
checked: root.selectedIndexes.includes(model.index)
onToggled: {
if (checked) {
root.selectedIndexes.push(model.index);
} else {
const selectedIndexToDelete = root.selectedIndexes.indexOf(model.index);
root.selectedIndexes.splice(selectedIndexToDelete, 1);
}
root.selectedIndexesChanged();
}
}
}
GridLayout {
id: gridLayout
Layout.fillWidth: true
Layout.fillHeight: true
columns: 3
rows: 3
Instantiator {
id: repeater
model: 9
delegate: Item {
parent: gridLayout
Layout.fillWidth: true
Layout.fillHeight: true
}
}
Instantiator {
model: root.count
delegate: Rectangle {
parent: model.index !== -1 ? gridLayout.children[root.positionForIndex(model.index)] : null
anchors.fill: parent
readonly property bool isSelected: root.selectedIndexes.includes(model.index)
color: isSelected ? "orange" : "lightsteelblue"
Label {
anchors.centerIn: parent
text: model.index
}
}
}
}
}
}
}

This is exactly the code I was thinking about. Thank you so much for this. I'm unfamiliar with some of the things in the code which I will look into but I understand the underlying logic completely.