QML中具有嵌套滚动区域的二维表

Question

我想在 QML 中创建一个电视节目表，其中纵轴是频道列表，横轴是基于时间的。例如像

_{（来源：zappware.com）}

最初，我创建了

• 一个垂直的 ListView
  • model = 频道列表
  • delegate = 水平 ListView
• 每个水平的 ListView 都有
  • model = 事件列表
  • delegate = 宽度与事件持续时间成正比的项目

到目前为止一切顺利。唯一的缺点是水平的 ListView 一个一个滚动，而它们应该一起滚动。

因此，不知何故，每个水平 ListView 的 contentX 属性都应该绑定到移动/滑动的水平 ListView 的 contentX 属性。请注意，此绑定是动态的：在第一行中滑动时，所有其他行都应绑定到第一行的 contentX。但是在第二行中滑动时应该更改。

关于如何做到这一点的任何建议？

我尝试了一种不同的方法

• 在垂直 ListView 的顶部创建一个 Flickable Item（contentWidth 是完整的时间窗口）。
• 将每个水平 ListView 绑定到此 Flickable 的 contentX（这是一个静态绑定）

这导致了很好的同步滚动，但我仍然有一些问题

• 我不得不做一些技巧来确保轻弹只能是水平或垂直的，而不是两者兼而有之
• 我无法再点击个别事件；我猜事件被 Flickable 拦截了
• 我也不确定这种具有巨大 contentWidth 的 Flickable 对内存的影响？

感谢您的反馈！

Answer 1

我会说频道只有一个垂直列表视图。但只有频道名称，而不是实际节目。除了程序的水平视图，您可以将它们全部塞进一个可滑动的内容中，使用开始时间和持续时间通过将它们的 x 和宽度属性绑定到前者来在可滑动的内容中布局程序。

然后您可以将频道列表视图与节目项的垂直滚动绑定在一起，以便您拥有与相应频道对应的节目。这样，您可以从两者垂直滚动，而只能水平滚动程序。

这是一个简单的例子：

ApplicationWindow {
    id: main
    width: 500
    height: 100
    visible: true
    color: "white"

    ListModel {
        id: modC
        ListElement { name: "Ch1" }
        ListElement { name: "Ch2" }
        ListElement { name: "Ch3" }
    }

    ListModel {
        id: modP1
        ListElement { name: "p1"; start: 0; duration: 6 }
        ListElement { name: "p2"; start: 6; duration: 6 }
        ListElement { name: "p3"; start: 12; duration: 6 }
        ListElement { name: "p4"; start: 18; duration: 6 }
    }
    ListModel {
        id: modP2
        ListElement { name: "p1"; start: 0; duration: 12 }
        ListElement { name: "p2"; start: 12; duration: 12 }
    }
    ListModel {
        id: modP3
        ListElement { name: "p1"; start: 0; duration: 8 }
        ListElement { name: "p2"; start: 8; duration: 8 }
        ListElement { name: "p3"; start: 16; duration: 8 }
    }

    property var subMod : [ modP1, modP2, modP3 ]

    Component {
        id: progDelegate
        Rectangle {
            property var source
            x: source.start * 50
            width: source.duration * 50
            height: 50
            color: "lightblue"
            border.color: "black"
            Text {
                text: source.name
            }
        }
    }

    Row {
        anchors.fill: parent
        ListView {
            id: list
            height: parent.height
            width: 100
            model: modC

            delegate: Item {
                width: 100
                height: 50
                Rectangle {
                    anchors.fill: parent
                    color: "red"
                    border.color: "black"
                    Text {
                        anchors.centerIn: parent
                        text: name
                    }
                }
                Component.onCompleted: {
                    var mod = subMod[index]
                    for (var i = 0; i < mod.count; ++i) progDelegate.createObject(flick.contentItem, {"source": mod.get(i), "y": index * 50})
                }
            }
        }
        Flickable {
            id: flick
            height: parent.height
            width: parent.width - list.width
            contentWidth: 1200
            contentHeight: contentItem.childrenRect.height
            clip: true
            flickableDirection: Flickable.HorizontalFlick
            contentY: list.contentY
        }
    }
}