how to implement nested listmodels in qml - qt

Question

Is it possible to implement 3 ListModels (one inside the other) and if yes how could I do it?
The 3 ListModels are for hour day and month accordingly.In other words I want one model for hour inside the model for day inside the model for month and I am going to use them in nested ListView s (3 of them ) to display the hour the day and the month in a calendar. I have made a try below :
ListModel{
id:monthlistModel
ListElement {
monthName:0
daylistModel:[
ListElement {
day:0
hourlistModel: [
ListElement{ hour:0;notes:"" }
]
}
]
}
ListElement {
monthName:1
daylistModel:[
ListElement {
day:1
hourlistModel: [
ListElement{ hour:1;notes:"" }
]
}
]
}
but I could not finish it .
Moreover I have some typeerror issues when I am running my code.The hourlistModel insists to be undefined for my nested listview and I dont no why.
Anyway back to my question , how can I go on with the above listmodel to display 24 hours , 31 days and 12 months ?

Answer 1

I suggest doing this imperatively with javascript rather than declaratively in QML, as it can be more dynamic and brief. One downside is that this is not well documented in my experience.
If you append an array to a ListModel, all of the array elements are converted into ListElements. Further than this, if an array is appended, and that array has nested arrays inside of it, the nested arrays are automatically converted to nested ListModels inside.
Here is a full example:
import QtQuick 2.15
import QtQuick.Window 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.12
Window {
visible: true
width: 1000
height: 600
ListModel {
id: monthsModel
Component.onCompleted: {
let months = [
{
name: "January",
days: createDays(31) // returns an array, nested arrays become nested ListModels when appended
},
{
name: "February",
days: createDays(28)
},
// add more months etc.
]
append(months) // appending a whole array makes each index into a ListElement at the top level
}
function createDays(dayCount) {
let days = []
for (let i = 0; i < dayCount; i++) {
days.push({
day: i + 1,
hours: createHours()
}
)
}
return days
}
function createHours() {
let hours = []
for (let i = 0; i < 24; i++) {
hours.push({
hour: i,
notes: ""
}
)
}
return hours
}
}
// Visual example code starts here ///////////////
ColumnLayout {
id: monthsColumn
Repeater {
model: monthsModel
delegate: Rectangle {
id: month
color: "pink"
implicitWidth: daysRow.implicitWidth + 10
implicitHeight: daysRow.implicitHeight + 10
RowLayout {
id: daysRow
anchors {
centerIn: parent
}
Text {
text: model.name
}
Repeater {
model: days // refers to the "days" entry in monthsModel.get(<monthIndex>)
delegate: Rectangle {
id: day
color: "orange"
implicitWidth: hoursColumn.implicitWidth + 10
implicitHeight: hoursColumn.implicitHeight + 10
ColumnLayout {
id: hoursColumn
anchors {
centerIn: parent
}
Text {
text: model.day
}
Repeater {
model: hours // refers to the "hours" entry in monthsModel.get(<monthIndex>).get(<dayIndex>)
delegate: Rectangle {
id: hour
color: "yellow"
implicitHeight: 5
implicitWidth: 5
// do something here with model.notes for each hour
}
}
}
}
}
}
}
}
}
}
The output of this shows months in pink, days in orange, and hours in yellow: