qt - QML:同步滚动多个ListView

Question

我想要一个带有(水平)ListView 委托(delegate)的(垂直)ListView。

水平代表应该同步滚动。为此，我在 ListView 之上放置了一个 Flickable，并将水平 ListView 的 contentX 绑定(bind)到 Flickable 的 contentX(垂直 ListView 的 contentY 也是如此)(注意:Here描述了一种不同的方法对于同步 ListView 滚动，但这似乎在移动设备上有性能问题)

下面的代码可以工作，但仍然存在以下问题

• 我没有在 Rectangle 中获得 onClicked(当我移除顶部的 Flickable 时我确实获得了它)
• 我想要水平轻拂或垂直轻拂，但不能同时进行。我可以通过设置 flickableDirection: Flickable.Horizo​​ntalFlick 来限制顶部 Flickable 的轻弹，但之后我不能再垂直轻弹(我希望 Flickable 会将未使用的鼠标事件传递给垂直 ListView 但这似乎没有发生)

关于如何解决这些问题的建议？

感谢任何帮助!

import QtQuick 2.0

Item {
    id: main
    visible: true
    width: 600
    height: 600

    ListView {
        id: verticalList
        width: parent.width;
        height: parent.height;
        contentY : flickable.contentY
        anchors.fill: parent
        spacing: 10
        orientation: ListView.Vertical
        model: 100
        delegate:
            ListView {
                id: horizontalList
                width: parent.width;
                height: 100;
                contentX : flickable.contentX
                spacing: 10
                orientation: ListView.Horizontal
                model: 20
                property var verticalIndex : index
                delegate:
                    Rectangle
                    {
                        property var colors : ['red', 'green', 'blue']
                        property var widths : [100, 200, 300]
                        height: 100
                        width: widths[(verticalIndex + model.index) % widths.length]
                        color: colors[model.index % colors.length]

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                console.log("Rectangle.onClicked")
                            }

                        }
                    }

           }

    }

    //on top a Flickable
    Flickable {
       id: flickable
       height: parent.height
       width: parent.width
       contentHeight: 100*100 //nrOfRows * rowHeight
       contentWidth: 20*300 //nrOfEvent * max/averageEventWidth
     }


}

Answer 1

我没有为您提供完美的解决方案，但它确实有效。当您使用 Flickable 时在 ListView 的顶部，您无法与之互动。所以，我用过 Flickable在ListView下面并以contentX为界的 Flickable和 ListView ，但这会导致循环，我得到以下输出，但我们得到了所需的行为。

QML Binding: Binding loop detected for property "value" 

编辑

所以，不用 ListView对于垂直列表，我只使用了 Repeater和 Column并使用属性绑定(bind)。它现在运行良好。

以下是更新后的版本。

import QtQuick 2.0

Item {
    id: main
    visible: true
    width: 600
    height: 600
    property bool virticalFlick: false  //To get either vertical or horizontal flicking

    Flickable {
        anchors.fill: parent
        contentWidth: contentItem.childrenRect.width
        contentHeight: contentItem.childrenRect.height
        flickableDirection: Flickable.VerticalFlick
        interactive: (virticalFlick === true)?true:false
        Column {
            id: column
            spacing: 10
            Repeater {
                id: repeater
                model: 20
                ListView {
                    id: horizontalList
                    width: 600;
                    height: 100;
                    clip: true
                    interactive: (virticalFlick === true)?false:true
                    spacing: 10
                    orientation: ListView.Horizontal
                    model: 20
                    property var verticalIndex : index
                    onMovingChanged: {
                        if(moving == true) {
                            for(var i=0; i<repeater.count ; i++) {
                                /* If the property is later assigned a static value from a JavaScript statement,
                            this will remove the binding.
                            However if the intention is to create a new binding then the property
                            must be assigned a Qt.binding() value instead. This is done by passing a function to
                            Qt.binding() that returns the desired result */
                                if (i !== index)
                                    repeater.itemAt(i).contentX = Qt.binding(function() { return contentX });
                            }
                        }
                        else {
                            for(var i=0; i<repeater.count ; i++) {
                                if (i !== index)
                                    repeater.itemAt(i).contentX = contentX; // This will remove binding
                            }
                        }

                    }

                    delegate: Rectangle {
                        property var colors : ['red', 'green', 'blue']
                        property var widths : [100, 200, 300]
                        height: 100
                        width: widths[(ListView.view.verticalIndex + model.index) % widths.length]
                        color: colors[model.index % colors.length]

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                console.log("Rectangle.onClicked")
                            }

                        }
                    }
                }
            }
        }
    }
}