循环#

使用 for-in 语法多次创建元素。

语法如下:for name[index] in model : id := Element { ... }

model 可以是以下类型之一:

  • 整数,此时元素将重复该次数

  • 本地声明的 数组或模型,此时元素将为数组或模型中的每个元素实例化。

name 将在元素内部可用于查找,就像一个伪属性,其值将设置为模型的值。index 是可选的,将设置为模型中此元素的索引。id 也是可选的。

示例#

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