Горизонтальный listView внутри Вертикальный ListView в 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

Я попробовал один раз, и он не работал, внешний список обрабатывает все события.Решение состояло в том, чтобы иметь Flickable в дополнение к ListViews и привязать contentX горизонтального и contentY вертикальных списков к contentX и contentY Flickable.

Некоторый полу-полный код, чтобы показать принцип:

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 в вашем вертикальном представлении списка, которое скрывает все события в вашем горизонтальном ListView. В 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        
    }
}

Не совсем уверен, что это надежно и правильноКстати, хотя.