Important: Please read the Qt Code of Conduct -

Customizing PageIndicator

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

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

    ReferenceError: currentIndex is not defined

    Any idea about?


    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?

    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.

  • 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.

  • @jpnurmi Thanks for the clarification!