QML列表清单（2D数据）

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

我希望将其显示为水平滚动＆＃34;时间轴＆＃34;，其中顶级数组表示数据行，每个子数组表示该行中的项目，放置在不同的时间。

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

代码和问题

我通过自定义ListView将数组传递给ListModel：

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模型。

此外，当我写下这个问题时，我意识到每行可能会尝试水平滚动而彼此独立。我希望他们全部作为一组滚动。这让我想知道嵌套的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文档没有说明这一点）。因此，当您在外部events的代理中访问角色名称ListView时，您得到的内容是这样的：

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

我认为通过将ListView或contentX设置为所有内部positionViewAtIndex，可以同时水平滚动所有内部ListView。