Unsolved QML Nested List view with Highlight
-
Hi,
I need to create nested list view and as shown below, and highlight the main list and sub-list with different color
I have tried with ListView highlight but there are issue like the highlight showing for child as well as parent as shown
below image.Here is the full code
import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick 2.2 import QtQuick.Controls 1.2 import QtQuick.Controls.Styles 1.1 ApplicationWindow { id: loginWindow //visibility: "Maximized" visible: true width: 720 height: 720 Item { width: 200 height: 720 ListView { id: list anchors.fill: parent model: nestedModel delegate: categoryDelegate highlight: Rectangle {color: "#FF00AAFF";//"#FF59ACFF"; radius: 2 } } ListModel { id: nestedModel ListElement { categoryName: "Veggies" collapsed: true // A ListElement can't contain child elements, but it can contain // a list of elements. A list of ListElements can be used as a model // just like any other model type. subItems: [ ListElement { itemName: "Tomato" }, ListElement { itemName: "Cucumber" }, ListElement { itemName: "Onion" }, ListElement { itemName: "Brains" } ] } ListElement { categoryName: "Fruits" collapsed: true subItems: [ ListElement { itemName: "Orange" }, ListElement { itemName: "Apple" }, ListElement { itemName: "Pear" }, ListElement { itemName: "Lemon" } ] } ListElement { categoryName: "Cars" collapsed: true subItems: [ ListElement { itemName: "Nissan" }, ListElement { itemName: "Toyota" }, ListElement { itemName: "Chevy" }, ListElement { itemName: "Audi" } ] } } Component { id: categoryDelegate Column { width: 200 Rectangle { id: categoryItem border.color: "black" border.width: 5 color: "#33FF5225" height: 50 width: 200 Text { anchors.verticalCenter: parent.verticalCenter x: 15 font.pixelSize: 24 text: categoryName } Rectangle { color: "red" width: 30 height: 30 anchors.right: parent.right anchors.rightMargin: 15 anchors.verticalCenter: parent.verticalCenter MouseArea { anchors.fill: parent // Toggle the 'collapsed' property onClicked:{ list.currentIndex= index nestedModel.setProperty(index, "collapsed", !collapsed) } } } } Loader { id: subItemLoader // This is a workaround for a bug/feature in the Loader element. If sourceComponent is set to null // the Loader element retains the same height it had when sourceComponent was set. Setting visible // to false makes the parent Column treat it as if it's height was 0. visible: !collapsed property variant subItemModel : subItems sourceComponent: collapsed ? null : subItemColumnDelegate onStatusChanged: if (status == Loader.Ready) item.model = subItemModel } } } Component { id: subItemColumnDelegate Column { property alias model : subItemRepeater.model width: 200 Repeater { id: subItemRepeater delegate: Rectangle { x:10 color: "#33FF5225" height: 40 width: 190 border.color: "black" border.width: 2 Text { anchors.verticalCenter: parent.verticalCenter x: 30 font.pixelSize: 18 text: itemName } } } } } } }
Image Link: http://imgur.com/qEEm4Fs
How can I overcome this issue. Basically I need to highlight Parent and child Item with different color.
Any help will be appreciated.