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.push(value): One can add an element to an array and model using the .push(value) method.
• array.remove(index): One can remove an element from an array and model using the .remove(index) method. The accepted index range is 0 <= index < array.length.
• array.insert(index, value): One can insert an element at a specified index to an array and model using the .insert(index, value) method. The accepted index range is 0 <= index <= array.length.

Out of bound access into an array will return default-constructed values.

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];
}

slint

Out of bound indexes in the remove and insert methods will result in the methods doing nothing.

export component Example {
    in-out property<[int]> list-of-int: [1,2,3];
  init => {
    // Both operations will do nothing and the list-of-int property value will still be [1, 2, 3].
    list-of-int.remove(4);
    list-of-int.insert(4, 10);
  }
}

slint