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.


Log in to reply
 

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