在扩展ListView的委托中为元素创建子列表

Question

我正在尝试修改QML示例中存在的扩展委托示例。最小要求是，每当用户单击listmodel的元素时，在扩展元素时也应显示相关的项目子列表。此外，还应该突出显示。

任何身体能否建议我如何做到这一点。？

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2

ApplicationWindow {
    title: qsTr("Advanced driver Assistance System")
    width: 640
    height: 480
    Rectangle{
        id: mainpage
        width: parent.width
        height: parent.height
        color: "black"
        Component
        {
            id: adasdelegate
            Item
            {
                id: adasConditionsItem
                property real detailsOpacity: 0
                width: listView.width
                height: 120

            //Background Rectangle for each adasConditions.
            Rectangle
            {
                id: itemBackground
                x: 2
                y: 2
                width: parent.width - x*2
                height: parent.height - y*2
                color: "steelblue"
                border.color: "orange"
                radius: 10
            }

            //Defining MouseArea to display the specific adas condition.
            MouseArea
            {
                anchors.fill: parent
                onClicked: {
                    adasConditionsItem.state = 'AdasConditions'
                    listView.currentIndex = index
                    //console.info("index :", listView.currentItem.objectName)
                }
            }
            Row
            {
                id: topLayout
                x: 10
                y: 10
                height: adasConditionImage.height
                spacing: 10
                Image
                {
                    id: adasConditionImage
                    width: 100
                    height: 100
                    source : defaultPicture
                }
                Column
                {
                    width: itemBackground.width - adasConditionImage.width - 10
                    height: itemBackground.height
                    spacing: 10

                    Text {
                        id: mainTitle
                        text: title
                        font.bold: true
                        font.pointSize: 10
                    }
                    Text {
                        id: subTitle
                        text: defaultConditions
                        font.bold: true
                        font.pointSize: 20
                    }
                }
            }

            TextButton{
                y: 10
                anchors { right: itemBackground.right; rightMargin: 10}
                opacity: adasConditionsItem.detailsOpacity
                text: "Close"
                onClicked: adasConditionsItem.state = '';
            }

            states:State{
                name: "AdasConditions"
                PropertyChanges {
                    target: itemBackground
                    color: "white"
                }
                PropertyChanges{
                    target: adasConditionImage
                    width: 130
                    height: 130
                }
                PropertyChanges{
                    target: mainTitle
                    visible: false
                }
                PropertyChanges {
                    target: adasConditionsItem
                    height: listView.height
                }

                PropertyChanges {
                    target: adasConditionsItem.ListView.view
                    explicit: true
                    contentY: adasConditionsItem.y
                }
                PropertyChanges{
                    target: adasConditionsItem
                    detailsOpacity: 1
                    x: 0
                }

                PropertyChanges {
                    target: adasConditionsItem.ListView.view
                    interactive: false
                }
            }
            transitions: Transition{
                ParallelAnimation {
                    ColorAnimation { property: "color"; duration: 500}
                    NumberAnimation { duration: 300; properties: "detailsOpacity, x, contentY, height, width"}
                }
            }
        }
    }


    ListView {
        id: listView
        anchors.fill: parent
        model: AdasConditionsModel {}
        delegate: adasdelegate
        focus: true
        onCurrentItemChanged: console.log(model.get(listView.currentIndex).name + ' selected')
        }
    }
}




//Model code.
import QtQuick 2.0

ListModel{
    id: nestedModel
    ListElement{
        title: "Driving Conditions"
        defaultConditions: "Highway driving"
        defaultPicture: "HighwayDriving.jpg"
        subItems: [
            ListElement {
                itemName: "Highway driving"
                picture: "HighwayDriving.jpg"
            },
            ListElement {
                itemName: "Urban driving"
                picture: "UrbanDriving.jpg"
            },
            ListElement {
                itemName: "Forward park Assist"
                picture: "FrontPark.jpg"
            },
            ListElement {
                itemName: "Reverse park Assist"
                picture: "ReversePark.jpg"
            }
        ]

    }

    ListElement{
        title: "Weather Conditions"
        defaultConditions: "Normal"
        defaultPicture: "Suuny.jpg"
        subItems: [
            ListElement {
                itemName: "Normal"
                picture: "Suuny.jpg"
            },
            ListElement {
                itemName: "Rain"
                picture: "Rain.jpg"
            },
            ListElement {
                itemName: "Snow"
                picture: "Snow.jpg"
            }
        ]
    }
    ListElement{
        title: "Lightning Conditions"
        defaultConditions: "Day"
        defaultPicture: "Day.jpg"
        subItems: [
            ListElement {
                itemName: "Day"
                picture: "Day.jpg"
            },
            ListElement {
                itemName: "Night"
                picture: "Night.jpg"
            },
            ListElement {
                itemName: "Dusk"
                picture: "Dusk.jpg"
            }
        ]

    }
}

Answer 1

其中一个解决方案是应用不同的代表，例如：

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600

    ListModel {
        id: listModel
        ListElement { itemStr: "ITEM1" }
        ListElement { itemStr: "ITEM2" }
        ListElement { itemStr: "ITEM3" }
    }

    Component {
        id: rowComponent
        Rectangle {
            height: 30
            width: itemWidth
            color: "#EFEFEF"
            Text {
                text: itemText
                anchors.fill: parent
                anchors.leftMargin: 10
                verticalAlignment: Text.AlignVCenter
            }
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    list.currentIndex = itemIndex;
                }
            }
        }
    }

    Component {
        id: listComponent
        Rectangle {
            height: lst.height
            width: itemWidth
            color: "#DEDEDE"
            ListView {
                id: lst
                width: itemWidth
                height: model.count * 20
                model: listModel
                delegate: Text {
                    height: 20
                    x: 5
                    text: itemStr.toLowerCase()
                    verticalAlignment: Text.AlignVCenter
                    font.bold: itemIndex == index
                }
            }
        }
    }

    ListView {
        id: list
        anchors.fill: parent
        spacing: 1
        currentIndex: -1
        model: listModel
        delegate: Item {
            height: childrenRect.height
            width: parent.width
            clip: true
            Loader {
                property int itemIndex: index
                property string itemText: itemStr
                property int itemWidth: parent.width
                sourceComponent: list.currentIndex == index ? listComponent : rowComponent
            }
            Behavior on height {
                NumberAnimation { duration: 300; easing.type: Easing.OutBack }
            }
        }
    }
}