重复与条件元素

重复元素 和 条件元素 会根据模型或布尔条件，将单个元素实例化零次或多次。两者只能作为另一个元素体内的子元素出现。两者都不能作为组件的根，也都不能出现在全局对象或接口中；每一种都会构成编译错误。

重复

for-in 构造为模型的每个条目实例化其元素一次：

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

slint

各部分为：

name 是可选标识符，绑定到当前实例的模型条目。它的行为类似于元素及其子元素作用域内的只读伪属性。
[index] 是可选的。存在时，其标识符绑定到当前实例从零开始的位置，类型为 int。
model 是驱动重复的表达式。
id := 是可选的，像通常一样命名实例化的元素。
Element { } 是要实例化的元素，并且是单个元素。该元素本身可以包含子元素，包括进一步的 for 和 if 元素。

name 和 [index] 都是可选且相互独立的；可以给出其中之一、两者或都不给出。

model 在 for 周围的作用域中求值，而不是在其内部求值，因此 name 和 index 不在 model 表达式自身的作用域内。当模型值变化时，元素会相应地被实例化、移除或更新以匹配。

模型

model 可以是：

一个整数，此时元素被重复该次数，并且 name（如果给出）是实例的索引，类型为 int；
一个数组或模型，此时元素为每个条目实例化一次，并且 name（如果给出）是该条目，具有数组的元素类型；
诸如 [a, b, c] 的数组字面量，它是数组情况的一种形式。

任何其他类型的模型都是一个错误。

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

在 for 元素内，双向绑定的右侧可以引用模型值，该值随后会与模型条目保持同步。

条件元素

if 构造仅在布尔条件为 true 时实例化其元素：

if condition : id := Element { }

slint

condition 必须是布尔表达式。元素在条件变为 true 时被实例化，在变为 false 时被移除。 id := 是可选的，主体是单个元素，可以包含子元素。

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

限制

@children 占位符不能出现在重复或条件元素内部；这会构成编译错误。
ListView 可以有一个 for 元素作为其唯一的子元素。任何其他子元素，包括第二个 for、普通元素或条件元素，都会构成编译错误。