在QML中具有嵌套滚动区域的二维表-Java 学习之路

我想在QML中创建一个电视节目表，其中垂直轴是 Channels 列表，水平轴是基于时间的 . 比如像

http://zappware.com/wbdsgn/wp-content/uploads/2014/08/Zuku_v03_EPG_01_Caslte.jpg

最初，我创建了

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

到现在为止还挺好 . 唯一的缺点是水平ListViews一个接一个地滚动，而它们应该一起滚动 .

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

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

我尝试了一种不同的方法

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

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

我必须做一些技巧，以确保轻弹只是水平或垂直，但不是两者
我再也无法点击个别活动了;我想事件被Flickable拦截了
我也不确定具有巨大contentWidth的这种Flickable对内存的影响？

反馈赞赏！

1 回答

我说只有一个垂直列表视图的 Channels . 但是 Channels 名称只是，而不是实际的节目 . 您可以使用开始时间和持续时间将它们全部填充在一起，而不是程序的水平视图，使用开始时间和持续时间通过将x和宽度属性绑定到前者来布局可滑动的程序 .

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

这是一个简单的例子：

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

回复于 2024-05-03T05:00:31+08:00

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

1 回答

相关问题