import QtQuick 2.0 import QtQuick.Controls 2.5 ListView { id: outerListView width: 200 height: 400 model: outerModel delegate: ItemDelegate { text: model.label width: outerListView.width ListView { id: innerListView width: 200 height: 300 model: model.children visible: expanded delegate: ItemDelegate { text: model.label width: innerListView.width highlight: checked ? Rectangle { color: "lightblue" } : null onClicked: { if (multiSelect) { checked = !checked; } else { outerListView.currentIndex = -1; checked = true; } } } } Rectangle { id: expandIcon anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter width: 10 height: 10 color: "black" transform: expanded ? Rotation { origin.x: 5; origin.y: 5; angle: 90 } : Rotation { origin.x: 5; origin.y: 5; angle: 0 } MouseArea { anchors.fill: parent onClicked: expanded = !expanded } } property bool expanded: false property bool multiSelect: false property bool checked: false } } 横向LIstView

要实现横向的 `ListView`，可以在外层 `ListView` 的 `orientation` 属性中设置为 `ListView.Horizontal`。同时，需要将内层 `ListView` 的宽度设置为外层 `ListView` 中每个选项的宽度之和，以确保内层选项能够全部展示出来，可以通过外层 `ListView` 的 `contentWidth` 属性来获取。

下面是修改后的示例代码：

import QtQuick 2.0
import QtQuick.Controls 2.5

ListView {
    id: outerListView
    width: 400
    height: 50
    orientation: ListView.Horizontal
    model: outerModel

    delegate: ItemDelegate {
        text: model.label
        width: 100

        ListView {
            id: innerListView
            width: outerListView.contentWidth
            height: 50
            model: model.children
            visible: expanded
            orientation: ListView.Horizontal

            delegate: ItemDelegate {
                text: model.label
                width: 100
                highlight: checked ? Rectangle { color: "lightblue" } : null
                onClicked: {
                    if (multiSelect) {
                        checked = !checked;
                    } else {
                        outerListView.currentIndex = -1;
                        checked = true;
                    }
                }
            }
        }

        Rectangle {
            id: expandIcon
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            width: 10
            height: 10
            color: "black"
            transform: expanded ? Rotation { origin.x: 5; origin.y: 5; angle: 90 } : Rotation { origin.x: 5; origin.y: 5; angle: 0 }
            MouseArea {
                anchors.fill: parent
                onClicked: expanded = !expanded
            }
        }

        property bool expanded: false
        property bool multiSelect: false
        property bool checked: false
    }
}

这样，就可以通过设置 `orientation` 属性将外层 `ListView` 设置为横向，同时将内层 `ListView` 的宽度设置为外层 `ListView` 中每个选项的宽度之和，来实现横向的 `ListView` 了。