[SOLVED] How to use nested Repeaters in QML

How to use nested Repeaters in QML

Row {
     Rectangle { width: 10; height: 20; color: "red" }
     Repeater {
         model: 10
         Rectangle { width: 20; height: 20; radius: 10; color: "green" }
     }
     Rectangle { width: 10; height: 20; color: "blue" }
}

Here, I want the color of each middle rectangle to be selected from a list. i.e., each color has to be different rather than all being green.

Do I need nested repeaters? How should I go about this?

^{Code snippet from: Qt Documentation — Repeater QML Type.}

Solution

You can use index, as shown below, when model is just a number. And then you need to convert this number into a color, for example using Qt.rgba() or Qt.hsva() function, as shown below. The first repeater in code (adapted from here) will create a sliding hue for a rainbow effect.

If you just want to list colors as an array and use repeater to show them, the second repeater shows how to do this. Just set the array as the model, and use modelData in the repeater to access the value.

Row {
    Rectangle { width: 10; height: 20; color: "red" }

    // use index (values 0..9) to generate "rainbow"
    Repeater {
        model: 10
        Rectangle {
            width: 20; height: 20; radius: 10
            color: Qt.hsla(index/(10-1), 1, 0.5, 1)
        }
    }

    // use modelData to get color string from model
    Repeater {
        model: [ "#808080", "#1100F0", "#F20F20", "#F3F620" ]
        Rectangle {
            width: 20; height: 20; radius: 10
            color: modelData
        }
    }

    Rectangle { width: 10; height: 20; color: "blue" }
}