QML列表列表（二维数据）

Question

总结：如何将一个 ListView 嵌套在另一个 ListView 中，将数据从外部模型提供给委托中的内部模型？

数据与欲望

我在JS中有一个数组数组：

[[ {t:0, label:"Big Bang"}, {t:5, label:"Earth Forms"} ],
 [ {t:0, label:"Alternate Bang"}, {t:3, label:"Cool Stuff"} ],
 [ {t:1, label:"Late Bang"}, {t:4, label:"Whee"}, {t:5, label:"More" } ]]

我想将其显示为水平滚动 "timeline"，其中顶级数组表示数据行，每个子数组表示该行中放置在不同时间的项目。

请注意，时间线仅在毫秒级别离散，值超出小时范围。与这个基于 Excel 的模型显示的不同，合并单元格的二维网格是不可行的。

代码和问题

我正在通过自定义 ListModel:

将数组传递给 ListView

Item {
    property var timeline: []
    onTimelineChanged: {
      rowData.clear();
      timeline.forEach(function(evts){
        rowData.append({ events:evts });
      });
    }
    ListView {
        id: rows
        model: ListModel { id:rowData }
        delegate: Item {
            Text { text: "Idx #"+index }
            ListView {
                orientation: ListView.Horizontal
                model: ListModel { id:events }
                delegate: …
            }
        }
    }
}

这正在正确填充行，但我不知道如何将 events 数据角色从外部 ListView 传递到每个委托中的 events 模型。

此外，当我写下这个问题时，我意识到每一行都可能尝试独立于另一行水平滚动。我希望它们都作为一个整体滚动。这让我想知道 nested ListView 是否适合这项工作，或者我是否应该使用其他一些数据驱动的 QML 结构。

Answer 1

你可以简单地将events赋值给内部的ListView.model，例如：

ListView {
    anchors.fill: parent
    model: ListModel { id:rowData }
    delegate: Rectangle {
        width: parent.width; height: 50
        ListView {
            anchors.fill: parent; orientation: ListView.Horizontal
            model: events
            delegate: Item {
                width: 80; height: 20
                Text { text: label }
            }
        }
    }
}

当 JavaScript 数组附加到 ListModel 行时，它将自动转换为 ListModel（但是，Qt 文档对此没有任何说明）。所以当你在外层ListView中访问委托中的角色名events时，你得到的是这样的：

ListModel { //row 0
    id: events
    ListElement {t:0, label:"Big Bang"}
    ListElement {t:5, label:"Earth Forms"}
}

而且我认为通过将 contentX 或 positionViewAtIndex 设置为所有内部 ListView.[=22= 可以同时水平滚动所有内部 ListView ]

QML列表列表（二维数据）

QML List of Lists (2D data)

listview

qml

qtquick2

数据与欲望

代码和问题