ListView and PageIndicator - PageIndicator is not updated



  • Hi everyone.

    I encountered a little problem with a ListView interacting with a PageIndicator.
    The ListView is populated with items from a ListModel which holds image sources.
    The ListView displays the images correctly and the PageIndicator shows "bullets" which represent the images. If one clicks on such a bullet then the ListView scrolls to the corresponding image. But if one flicks to another image by means of the ListView then the PageIndicator is not updated - meaning that the PageIndicator does not highlight the bullet representing the newly selected image.

    Can anyone tell me if I missed to set a certain property?

    Here is a code excerpt which shows how I used the ListView and PageIndicator:

            ListView {
                id: listView
                anchors.fill: parent
                orientation: Qt.Horizontal
                model: ListModel {
                     id: listModel
                }
                focus: true
                snapMode: ListView.SnapOneItem
                currentIndex: pageIndicator.currentIndex
                PageIndicator {
                    id: pageIndicator
                    currentIndex: listView.currentIndex
                    count: listView.count
                    interactive: true
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                }
                delegate: Component {
                    Item {
                        width: listView.width
                        height: listView.height
                        Image {
                            source: sourceImage
                            width: parent.width
                            height: parent.height
                            smooth: true
                            fillMode: Image.PreserveAspectFit
                            verticalAlignment: Image.AlignVCenter
                        }
                    }
                }
            }
    


  • Hello @BjoernK !
    I think you did some bad bindings :
    PageIndicator {
    currentIndex: listView.currentIndex
    }
    ListView {
    currentIndex: pageIndicator.currentIndex
    }
    Im not sur this is looking like a binding loop, correct me if im wrong

    maybe you can create a property int _index
    and then use it to set the same index on your list & PageIndicator

    PageIndicator {
    currentIndex: _index
    }
    ListView {
    currentIndex: _index
    }



  • Hi!

    Thank you for your reply.

    I think the binding of the currentIndex-properties is correct. The following example can be found in the Qt docs:

    SwipeView {
        id: view
        currentIndex: pageIndicator.currentIndex
        anchors.fill: parent
    
        Page {
            title: qsTr("Home")
        }
        Page {
            title: qsTr("Discover")
        }
        Page {
            title: qsTr("Activity")
        }
    }
    
    PageIndicator {
        id: pageIndicator
        interactive: true
        count: view.count
        currentIndex: view.currentIndex
    
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
    

    I'm currently using Qt 5.9.1. I'm going to install Qt 5.9.3. Maybe it works then.



  • The bindings are fine. The problem is that the ListView has only snapMode set, but highlightRangeMode seems to be missing. Therefore the ListView is not changing its currentIndex while flicking.

    snapMode does not affect the currentIndex. To update the currentIndex as the list is moved, set highlightRangeMode to ListView.StrictlyEnforceRange.

    https://doc-snapshots.qt.io/qt5-5.9/qml-qtquick-listview.html#snapMode-prop



  • @jpnurmi said in ListView and PageIndicator - PageIndicator is not updated:

    The bindings are fine. The problem is that the ListView has only snapMode set, but highlightRangeMode seems to be missing. Therefore the ListView is not changing its currentIndex while flicking.

    snapMode does not affect the currentIndex. To update the currentIndex as the list is moved, set highlightRangeMode to ListView.StrictlyEnforceRange.

    https://doc-snapshots.qt.io/qt5-5.9/qml-qtquick-listview.html#snapMode-prop

    Thank you @jpnurmi.
    The following line solved the problem:

    highlightRangeMode: ListView.StrictlyEnforceRange
    

    Somehow I missed another thread: https://forum.qt.io/topic/81429/listview-does-not-change-currentindex-when-scrolling/6



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