Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML ListView with sections, highlightRangeMode set to ListView.StrictlyEnforceRange and clip set to true



  • Hi all,

    trying to work with ListView in QML, I cannot understand why setting clip to true and highlightRangeMode to ListView.StrictlyEnforceRange (to have currentIndex updated), I cannot see the first section header (the white rectangle with letter 'A').
    Removing the clip, I can see the first section header but scrolling is strange.
    Removing the ListView.StrictlyEnforceRange everything works (even when clip is set to true)
    The ListView.StrictlyEnforceRange option is not compatible with sections?

    Qt version is 5.14.2.

    Example code is:

        Item {
            width: 100
            height: 200
    
            ListView {
                anchors.fill: parent
                highlightRangeMode: ListView.StrictlyEnforceRange
                clip: true
                model: ListModel {
                    ListElement { section: "A" }
                    ListElement { section: "A" }
                    ListElement { section: "A" }
                    ListElement { section: "B" }
                    ListElement { section: "B" }
                    ListElement { section: "C" }
                    ListElement { section: "C" }
                    ListElement { section: "C" }
                    ListElement { section: "D" }
                    ListElement { section: "D" }
                    ListElement { section: "D" }
                    ListElement { section: "E" }
                    ListElement { section: "E" }
                    ListElement { section: "F" }
                }
    
                delegate: Rectangle {
                    width: parent.width
                    height: 50
                    color: "black"
                    Text {
                        anchors.centerIn: parent
                        color: "white"
                        text: model.index
                    }
                }
    
                section.property: "section"
                section.delegate: Rectangle {
                    width: parent.width
                    height: 50
                    color: "white"
                    Text {
                        anchors.centerIn: parent
                        color: "black"
                        text: section
                    }
                }
            }
        }
    

Log in to reply