QML ListView visible

[beh_zad]

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
    }
}

[p3c0]

@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...

[beh_zad]

@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

[p3c0]

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

[beh_zad]

answer:
http://stackoverflow.com/questions/29647291/qt-qml-listview-visible

[p3c0]

@beh_zad Thanks for sharing.