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.2ApplicationWindow {
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.0ListModel{ 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" } ] } }