如何在qml中实现嵌套列表模型

Question

是否可以实现 3 ListModels（一个在另一个里面），如果可以，我该怎么做？ 3 ListModels 用于小时日和月 accordingly.In 换句话说，我想要一个模型在模型中为小时在模型中为日在模型中为月我将在嵌套中使用它们 ListView s（其中 3 个）在日历中显示小时、日期和月份。我在下面做了一个尝试：

   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:"" }
                          ]
                      }
                  ]
       }

但我无法完成它。此外，当我运行我的 code.The hourlistModel 坚持对我的嵌套列表视图未定义时，我遇到了一些类型错误问题，我不知道为什么。无论如何回到我的问题，我怎样才能继续上面的 listmodel 来显示 24 小时、31 天和 12 个月？

Answer 1

我建议使用 javascript 强制执行此操作，而不是在 QML 中以声明方式执行此操作，因为它可以更加动态和简短。一个缺点是，根据我的经验，这没有很好的记录。

如果将数组附加到 ListModel，则所有数组元素都将转换为 ListElement。除此之外，如果附加了一个数组，并且该数组内部有嵌套数组，则嵌套数组会自动转换为内部嵌套的 ListModels。

这是一个完整的例子：

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
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

此输出以粉红色显示月，以橙色显示天，以黄色显示小时：

如何在qml中实现嵌套列表模型

how to implement nested listmodels in qml

qt

qml

listmodel