ListView and PageIndicator - PageIndicator is not updated

BjoernK

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

BjoernK

@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

ODБOï

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
}

BjoernK

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.

jpnurmi

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

BjoernK

@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