QML ListView visible



  • Hi everybody, I found this codes in qml example file, but I have one question, is there any way to hide children of sectionHeading when user click on it, for example when user click on Tiny, its children visibility "Ant" and "Flea will be hide?

    Rectangle {
        id: container
        width: 300
        height: 360
    
        ListModel {
            id: animalsModel
            ListElement { name: "Ant"; size: "Tiny" }
            ListElement { name: "Flea"; size: "Tiny" }
            ListElement { name: "Parrot"; size: "Small" }
            ListElement { name: "Guinea pig"; size: "Small" }
            ListElement { name: "Rat"; size: "Small" }
            ListElement { name: "Butterfly"; size: "Small" }
            ListElement { name: "Dog"; size: "Medium" }
            ListElement { name: "Cat"; size: "Medium" }
            ListElement { name: "Pony"; size: "Medium" }
            ListElement { name: "Koala"; size: "Medium" }
            ListElement { name: "Horse"; size: "Large" }
            ListElement { name: "Tiger"; size: "Large" }
            ListElement { name: "Giraffe"; size: "Large" }
            ListElement { name: "Elephant"; size: "Huge" }
            ListElement { name: "Whale"; size: "Huge" }
        }
    
        // The delegate for each section header
        Component {
            id: sectionHeading
            Rectangle {
                width: container.width
                height: childrenRect.height
                color: "lightsteelblue"
    
                Text {
                    text: section
                    font.bold: true
                    font.pixelSize: 20
                }
            }
        }
    
        ListView {
            id: view
            anchors.top: parent.top
            anchors.bottom: buttonBar.top
            width: parent.width
            model: animalsModel
            delegate: Text { text: name; font.pixelSize: 18 }
    
            section.property: "size"
            section.criteria: ViewSection.FullString
            section.delegate: sectionHeading
        }
    
        Row {
            id: buttonBar
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 1
            spacing: 1
        }
    }
    

  • Moderators

    @beh_zad Yes. Create a MouseArea for Rectangle in sectionHeading. Add a global property which will track the current clicked header section. Bind this to the ListView.section of delegate Item ( which is here Text) and change the visible property. Thus when section is clicked the binding will be affected and thus visible property will change. To sum up:

    property string psection  //global property - holds clicked section
    ...
    
    Component {
            id: sectionHeading
            Rectangle {
                width: container.width
                ...
                MouseArea {
                    anchors.fill: parent
                    onClicked: psection = section // update global psection property
                }
           }
    }
    ...
    
    ListView {
            id: view
            ...
            delegate: Text {
                text: name; font.pixelSize: 18; visible : ListView.section===psection ? false: true //the binding which will be executed on global property change.
            }
    }
    

    Hope this helps...



  • @p3c0 thanks for your help. but it works for one section, and when I click another section, the previous section will be opened :( . I want each section work separately. I will be grateful if you could help me to solving this


  • Moderators

    @beh_zad Well you can add a check that if it is already visited then don’t make it visible.




  • Moderators

    @beh_zad Thanks for sharing.


Log in to reply
 

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