Customizing PageIndicator

Mark81

I'm trying to customize a PageIndicator as described here:

http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-pageindicator

but the very same code running on Qt5.7.0 leads to:

ReferenceError: currentIndex is not defined

Any idea about?

EDIT:

Well, the help page of PageIndicator says:

The following properties are available in the context of each delegate:
index : int The index of the item
pressed : bool Whether the item is pressed

so it seems currentIndex is not available. But how to know if it is actually the current item? And why the example uses this non-existent attached property?

EDIT2:
as workaround I can access the currentIndex property using a reference to the PageIndicator object:


PageIndicator {
    id: myPageInd
    count: 5
    currentIndex: 2

    delegate: Rectangle {
        implicitWidth: 8
        implicitHeight: 8

        radius: width / 2
        color: "#21be2b"

        opacity: index === myPageInd.currentIndex ? 0.95 : pressed ? 0.7 : 0.45

        Behavior on opacity {
            OpacityAnimator {
                duration: 100
            }
        }
    }
}

Anyway it seems not what Qt developers had in mind.

jpnurmi

Thanks for bringing it up. We'll update the docs.

It works without an explicit ID if the custom PageIndicator is in its own .qml file, which is the case for the file where the snippet is extracted from. However, if the PageIndicator is customized inline in a tree of other objects, you'll need to supply an ID since you can't rely on the context.

Mark81

@jpnurmi Thanks for the clarification!