QML中垂直ListView内部的水平ListView

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

垂直列表视图可以滚动，但水平列表视图无法滚动。 需要帮助吗？ 谢谢。

- h_kassem

Answer 1

我曾尝试过一次，但它没有起作用，外部列表处理了所有事件。解决方案是除了ListView之外还有一个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
    }

}

- blakharaz

---

没错。 另一个解决方案是从垂直列表中删除focus:true。 - h_kassem

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");
                    }
                }
            }
        }
    }
}

- sabbour

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

- Niraj D

---

你好，有没有一种方法可以为每个内部的ListView设置一个ListModel（来自cpp）？ - 501 - not implemented

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

虽然不太确定这是否是一种可靠且适当的方式。

- sshilovsky