容器组件

当组件在元素树中使用时，写在其使用处内部的子元素属于该组件。 默认情况下，它们会被追加到组件根元素的子元素之后。 @children 表达式会覆盖这种放置方式： 它标记组件自身元素层级中插入这些使用处子元素的唯一位置。

component BoxWithLabel inherits GridLayout {
    Row {
        Text { text: "label text here"; }
    }
    Row {
        @children
    }
}

export component MyApp inherits Window {
    preferred-height: 100px;
    BoxWithLabel {
        Rectangle { background: blue; }
        Rectangle { background: yellow; }
    }
}

slint

@children 是一个代表使用处子元素的表达式，而不是宏。 它不接受参数，并单独出现在子元素应出现的位置。 在 @ 之后写 children 以外的任何内容都会构成编译错误。

放置

@children 可以直接出现在组件树中任何元素的内部，位于该元素子元素中要插入使用处子元素的位置。 这些子元素会作为包围 @children 的元素的子元素，插入到那个确切位置；写在 @children 前后两侧的兄弟元素会保持它们周围的顺序。 在上面的示例中，两个矩形成为第二个 Row 的子元素，而不是 BoxWithLabel 的直接子元素。

整个组件层级中至多允许一个 @children。 同一元素中的第二个 @children 是编译错误，当同一组件中另一个元素已经有 @children 时，某元素中再出现一个 @children 也是编译错误。

@children 不能出现在重复元素（for）、条件元素（if）或 match 元素内部；每一种都会构成编译错误。 它也不能出现在 ComponentContainer 内部。

不包含 @children 的组件仍然接受使用处子元素；它们会被追加到根元素自身子元素之后。

布局与父子关系

插入的子元素会参与包围元素的布局，就像它们直接被写在那里一样。 当该元素是布局时，它们会成为该布局的单元格，并由该布局进行布局。 它们的绑定和回调在使用处（即它们被书写的位置）的作用域中求值，而不是在包含 @children 的组件的作用域中求值。