Repetition and Data Models

Use the for-in syntax to create an element multiple times, once per entry in a model:

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

The model can be an integer (repeat that many times), an array, or a model provided by your business logic. This is how you build lists and tables: the data lives in a model, and the UI declares what one entry looks like:

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

Related to for is the if construct, which instantiates an element only while a condition holds:

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

See Repetition and Conditional Elements in the language reference for the exact syntax, and Arrays and Models for the array operations like length, indexing, push, insert, and remove.