Required property not working with repeater

Question

I have a component like this:

import QtQuick 2.15

Item {
    id: root

    property double value: 0.0

    property int core: 1

    property color progressBarColor: "black"
    property color minMaxTextColor: "black"
    property int fontSize: height - 6

//....
}

Now I thought it would be a good idea to make some propertis required since they are should be declared when the component is used. So I changed to this:

import QtQuick 2.15

Item {
    id: root

    required property double value

    required property int core

    property color progressBarColor: "black"
    property color minMaxTextColor: "black"
    property int fontSize: height - 6

//....
}

The Component gets called in a repeater likes this:

SystemInformation{
    id: sysinfo
}

Column{
    id: displayColumn


    Repeater{
        model: sysinfo.coreUtilizationsInPercent.length

        CoreUtilizationDisplay{
            width: root.elementWidth
            height: root.elementHeight
            fontSize: root.fontSize

            progressBarColor: "#3399FF" // blue
            minMaxTextColor: "blue"

            core: index + 1
            value: sysinfo.coreUtilizationsInPercent[index]
        }
    }
}

Now this works fine until I make the properties required. I wonder why It does not work?

If I declare it required I get this error:

qrc:/qml/SystemInformationDisplay.qml:57: ReferenceError: index is not defined

I did the same with similar components which are not in the repeater and there it works fine.

Why?

Answer 1

From the qt develop blog

And if your delegates do not contain required properties, nothing changes here. However, if they contain at least one required property, those names are not accessible anymore. Instead, you have to explicitly opt in by specifying them as required properties.

In this case you need to add the requiered property index to the component.

import QtQuick 2.15

Item {
    id: root

    required property double value
    required property int core

    required property int index // add it 

    property color progressBarColor: "black"
    property color minMaxTextColor: "black"
    property int fontSize: height - 6

//....
}

With this additional index you can build your component and have access to index. You do not need to specify index. This is done, since it is a delegate.

Repeater{
    model: sysinfo.coreUtilizationsInPercent.length

    delegate: CoreUtilizationDisplay{
        width: root.elementWidth
        height: root.elementHeight
        fontSize: root.fontSize

        progressBarColor: "#3399FF" // blue
        minMaxTextColor: "blue"

        core: index + 1
        value: sysinfo.coreUtilizationsInPercent[index]
    }
}

More informations can be found in the documentation