qml中垂直列表视图内的水平列表视图

Question

我想让一个水平 listView 作为另一个垂直 listView 的委托，我编写了以下代码：

import Qt 4.7

Item {
    id:main
    width: 360
    height: 640

    Component{
        id:myDelegate
            ListView{
                id:list2
                spacing: 5
                width:list.width
                height:list.height/3
                interactive: true
                orientation: ListView.Horizontal
                model: ListModel {
                    ListElement {
                        name: "Bill Smith"
                        number: "555 3264"
                    }
                    ListElement {
                        name: "John Brown"
                        number: "555 8426"
                    }
                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }

                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }

                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }
                }
                delegate: Text{text:name
                width: main.width/3}

                focus: true
                MouseArea {
                    anchors.fill:  parent
                    onClicked: {
                        ListView.list2.currentIndex = ListView.list2.indexAt(mouseX, mouseY)
                    }
                }

            }
    }

    ListView {
        id: list
        clip: true
        spacing: 5
        anchors.fill: parent
        orientation: ListView.Vertical
        model: Model{}
        delegate:myDelegate

//        highlight: Rectangle {
//            width: list.currentItem.width
//            color: "lightsteelblue"
//            radius: 5
//        }
        focus: true
        MouseArea {
            anchors.fill:  parent
            onClicked: {
                list.currentIndex = list.indexAt(mouseX, mouseY)
            }
        }
    }
}

垂直的列表视图滚动良好，但水平的不滚动。 有什么帮助吗？ 谢谢

Answer 1

我试了一次还是不行，外部列表处理所有事件。解决方案是在 ListViews 之外添加一个 Flickable，并将水平列表的 contentX 和垂直列表的 contentY 锚定到 Flickable 的 contentX 和 contentY。

一些半完整的代码来展示原理：

Item {

    ListView {

        anchors.fill: parent
        clip: true
        orientation: ListView.Vertical
        interactive: false
        contentY: listController.contentY
        delegate: ListView {
             orientation: ListView.Horizontal
             interactive: false
             contentX: listController.contentX
        }

    }

    Flickable {
        id: listController
        anchors.fill: parent
        contentHeight: vert.contentHeight
        contentWidth: horizontalElement.width
    }

}

Answer 2

我在模拟器上尝试了这个解决方案，它奏效了。

import QtQuick 1.1
import com.nokia.symbian 1.1

Page {
    id: mainPage
    anchors.fill: parent


    ListModel {
        id: colorsModel
        ListElement {
            colorCode: "red"
        }
        ListElement {
            colorCode: "green"
        }
        ListElement {
            colorCode: "blue"
        }
        ListElement {
            colorCode: "orange"
        }
        ListElement {
            colorCode: "white"
        }
        ListElement {
            colorCode: "purple"
        }
        ListElement {
            colorCode: "gray"
        }
        ListElement {
            colorCode: "yellow"
        }
        ListElement {
            colorCode: "purple"
        }
    }

    ListView {
        anchors.fill: parent
        model: 30
        spacing: 20
        cacheBuffer: 200 // in pixels

        delegate:
            ListView {
            width: parent.width;
            height: 50;

            spacing: 20
            model: colorsModel
            orientation: ListView.Horizontal
            delegate:
                Rectangle {
                color: colorCode
                width: 50
                height: 50

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        console.log(colorCode + " clicked");
                    }
                }
            }
        }
    }
}

Answer 3

您的垂直列表视图中有一个MouseArea，它将所有事件窃取到您的水平列表视图。 QML 的最佳实践是在委托中包含所有 MouseArea 组件。

另外，不要使用indexAt(mouseX,mouseY) 方法，而是使用所有代表都可用的index 属性。

为了将鼠标事件从列表委托的MouseArea 传播到列表2 委托的MouseArea，请使用mouse.accepted = false

Item {
    id:main
    width: 360
    height: 640

    Component{
        id:myDelegate
            ListView{
                id:list2
                spacing: 5
                width:list.width
                height:list.height/3
                interactive: true
                orientation: ListView.Horizontal
                model: ListModel {
                    ListElement {
                        name: "Bill Smith"
                        number: "555 3264"
                    }
                    ListElement {
                        name: "John Brown"
                        number: "555 8426"
                    }
                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }

                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }

                    ListElement {
                        name: "Sam Wise"
                        number: "555 0473"
                    }
                }
                delegate: Text {
                text:name
                width: main.width/3}

                focus: true
                MouseArea {
                    anchors.fill:  parent
                    onClicked: {
                        list2.currentIndex = index;
                    }
                }

              }

        MouseArea {
            anchors.fill:  parent
            onClicked: {
                list2.ListView.view.currentIndex = index;
                mouse.accepted = false;
            }
        }
    }

    ListView {
        id: list
        clip: true
        spacing: 5
        anchors.fill: parent
        orientation: ListView.Vertical
        model: Model{}
        delegate:myDelegate
        focus: true
    }
}

Answer 4

您可以使用z 属性使外部列表首先处理鼠标事件。

ListView {
    z: 100 // put whatever you want or need
    delegate: ListView {
        z: 1000 // put whatever is above 100
    }
}

甚至更好：

ListView {
    delegate: ListView {
        z: parent.z + 1        
    }
}

虽然不太确定这是一种可靠且正确的方法。