Repetition

Use the for-in syntax to create an element multiple times.

The syntax looks like this: for name[index] in model : id := Element { ... }

The model can be of the following type:

• an integer, in which case the element will be repeated that amount of time
• an array type or a model declared natively, in which case the element will be instantiated for each element in the array or model.

The name will be available for lookup within the element and is going to be like a pseudo-property set to the value of the model. The index is optional and will be set to the index of this element in the model. The id is also optional.

Examples

export component Example inherits Window {
    preferred-width: 300px;
    preferred-height: 100px;
    for my-color[index] in [ #e11, #1a2, #23d ]: Rectangle {
        height: 100px;
        width: 60px;
        x: self.width * index;
        background: my-color;
    }
}

slint

export component Example inherits Window {
    preferred-width: 50px;
    preferred-height: 50px;
    in property <[{foo: string, col: color}]> model: [
        {foo: "abc", col: #f00 },
        {foo: "def", col: #00f },
    ];
    VerticalLayout {
        for data in root.model: my-repeated-text := Text {
            color: data.col;
            text: data.foo;
        }
    }
}

slint

Arrays and Models

Arrays are declared by wrapping [ and ] square brackets around the type of the array elements.

Array literals as well as properties holding arrays act as models in for expressions.

export component Example {
    in-out property<[int]> list-of-int: [1,2,3];
    in-out property<[{a: int, b: string}]> list-of-structs: [{ a: 1, b: "hello" }, {a: 2, b: "world"}];
}

slint

Arrays define the following operations:

• array.length: One can query the length of an array and model using the builtin .length property.
• array[index]: The index operator retrieves individual elements of an array.
• array.any(name => condition): Returns true if the boolean predicate is true for at least one element.
• array.all(name => condition): Returns true if the boolean predicate is true for every element.

Out of bound access into an array will return default-constructed values. The argument name of an any or all predicate is available only in the predicate expression, and its type is inferred from the array element type. any returns false for an empty array, while all returns true for an empty array.

export component Example {
    in-out property<[int]> list-of-int: [1,2,3];

    out property <int> list-len: list-of-int.length;
    out property <int> first-int: list-of-int[0];
    out property <bool> contains-two: list-of-int.any(value => value == 2);
    out property <bool> all-positive: list-of-int.all(value => value > 0);
}

slint