Repetition and Conditional Elements

A repeated element and a conditional element instantiate a single element, zero or more times, driven by a model or a boolean condition. Both appear only as a child within the body of another element. Neither can be the root of a component, and neither may appear in a global or interface; each is a compile error.

Repetition

A for-in construct instantiates its element once for each entry of a model:

for name[index] in model : id := Element { }

slint

The parts are:

• name is an optional identifier bound to the model entry for the current instance. It behaves like a read-only pseudo-property in scope within the element and its children.
• [index] is optional. When present, its identifier is bound to the zero-based position of the current instance and has type int.
• model is the expression that drives the repetition.
• id := is optional and names the instantiated element as usual.
• Element { } is the element to instantiate, and it is a single element. That element may itself contain children, including further for and if elements.

Both name and [index] are optional and independent; either, both, or neither may be given.

The model is evaluated in the scope surrounding the for, not inside it, so name and index are not in scope within the model expression itself. When the model value changes the element is instantiated, removed, or updated to match.

Model

The model may be:

• an integer, in which case the element is repeated that many times and name, if given, is the index of the instance and has type int;
• an array or model, in which case the element is instantiated once per entry and name, if given, is the entry and has the array’s element type;
• an array literal such as [a, b, c], which is one form of the array case.

A model of any other type is an error.

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

Inside a for element, the right-hand side of a two-way binding may reference the model value, which then stays in sync with the model entry.

Conditional Elements

An if construct instantiates its element only while a boolean condition is true:

if condition : id := Element { }

slint

The condition must be a boolean expression. The element is instantiated when the condition becomes true and removed when it becomes false. id := is optional, and the body is a single element that may contain children.

export component Example inherits Window {
    preferred-width: 50px;
    preferred-height: 50px;
    if area.pressed : foo := Rectangle { background: blue; }
    if !area.pressed : Rectangle { background: red; }
    area := TouchArea {}
}

slint

Restrictions

• The @children placeholder cannot appear inside a repeated or conditional element; this is a compile error.
• A ListView may have a single for element as its only child. Any other child, including a second for, a plain element, or a conditional element, is a compile error.