QML Listview with scrollbar customized

Question

I've tried to search for this question on Google and dedicated forums, but I didn't find nothing.

My problem: I have a Listview with a delegate, reading from a C++ model as per Qt guide lines.

I can't use scroll bars when items are more than visible area, but I would get something like:

... 
Item_1
Item_2
Item_N
...

where the 3 dots will be enabled/disabled to tell that the list can be scrolled up or down based on how many items are into the view.

All in all, it's like a customized scroll bars.

Do you have any suggestion to achieve this behaviour or where I can look at ? Thank you. Cristiano

I would use footer and header for this purpose. An advantage of this approach is that these items are always visible and not scrollable. — folibis
@folibis: that's a good suggestion. How can I calculate how many items are in the visibile area? listview has a flickable and honestly I don't understand how can I get such information.Thanks — Chris
There doesn't appear to be a good way to access how many or which items are currently visible. About the only way I can think of to track that would be for the delegate to add itself to a JS array on Component.onCompleted and remove itself from that array on Component.onDestruction. — David K. Hess

Chris Chris · Accepted Answer · 2020-05-21T15:02:38

I've solved.

The snippet is here. Is a part of a whole QML file with a C++ backend, but is quite straightforward and maybe can be useful for somebody that want to do the same:

Column
    {
        anchors.fill: parent
        // header
        Rectangle
        {
            id: headerComponent
            width: list.width
            height: headerHeight
            color: "transparent"

            Text {
                anchors.fill: parent
                color: "white"
                visible: list.dotUp
                font.pointSize: 11
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("...")
            }
        }

        ListView
        {
            id: list
            property int draggedItem: -1
            property int visibileItems: 0
            property bool dotUp: false
            property bool dotDown: false

            width: parent.width
            height: parent.height - headerHeight*2
            clip: true
            spacing: 5
            model: backendList.model
            highlightMoveDuration: 10
            focus: true
            currentIndex: backendList.currentIndex
            snapMode: ListView.SnapToItem
            pixelAligned: true

            function setHeaderAndFooter()
            {     
                if (visibileItems >= count)
                {
                    return
                }
                var index = indexAt(1, contentY)
                if ( index === 0 && visibileItems < count)
                {
                    dotDown = true
                    dotUp = false
                }

                if (index > 0 && !(count-index <= visibileItems))
                {
                    dotDown = true
                    dotUp = true
                }

                if (index > 0 && count-index <= visibileItems)
                {
                    dotDown = false
                    dotUp = true
                }
            }

            onCountChanged:
            {
                visibileItems =  height / ( backendList.itemHeight + list.spacing)
                var reminder =  height % ( backendList.itemHeight + list.spacing)
                if (reminder)
                {
                    ++visibileItems
                }

                setHeaderAndFooter()
            }

            onContentYChanged:
            {
                var index = indexAt(1, contentY)
                setHeaderAndFooter()
            }
.....
        // footer
        Rectangle
        {
            width: list.width
            height: headerHeight
            color: "transparent"

            Text {
                anchors.fill: parent
                color: "white"
                font.pointSize: 11
                visible: list.dotDown
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: qsTr("...")
            }
        }

QML Listview with scrollbar customized

1 Answers