Creating a sublist for the elements in expanding delegates



  • Hi All,

    I am trying to modify the expanding delegates example present in QML examples.Mine requirement is that whenever the user clicks the element of listmodel a associated sublist of items should also appear when elements are expanded.An d also highlight should also occur.

    Can any Body suggest me how to do that.?`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"
                }
            ]
    
        }
    }

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.