12. UI 组件

本章是官方基础组件的用法参考，定义本文 UI 草案中的参数、默认值和展示效果。示例是 bob:shop.ui 场景 render 内的节点片段。

官方库的 key 和引用形式尚未定义，来源约定见场景与渲染树。用户库提供的组件则以其实际声明为准。

12.1 Column

Column 从上到下排列子节点。

Column(gap: 12, padding: 24) {
    Text("First")
    Text("Second")
}

参数	值类型	默认值	含义
`gap`	数字	`0`	相邻子节点的垂直间距
`padding`	数字	`0`	四个方向的内边距

子节点： 接受零个或多个节点。

布局效果： 在本文简单内容布局模型中，宽度为最宽子节点宽度加左右内边距；高度为子节点高度、相邻间距和上下内边距之和。空容器没有子节点间距。

Row 从左到右排列子节点。

Row(gap: 8, padding: 4) {
    Text("Left")
    Text("Right")
}

参数	值类型	默认值	含义
`gap`	数字	`0`	相邻子节点的水平间距
`padding`	数字	`0`	四个方向的内边距

子节点： 接受零个或多个节点。

布局效果： 在本文简单内容布局模型中，宽度为子节点宽度、相邻间距和左右内边距之和；高度为最高子节点高度加上下内边距。空容器没有子节点间距。

Spacer 占据布局空间，不显示可见内容。

Spacer(size: 16)

参数	值类型	默认值	含义
`size`	数字	`0`	占位宽度与高度

子节点： 不接受。

布局效果： 在父组件的排列中占据指定空间。它不是间距参数本身，而是树中的一个节点。

Text 显示字符串内容。

Text("Product")
Text("Shop", role: .title)

参数	值类型	默认值	含义
第一个位置参数	字符串	`""`	显示的文本
`role`	符号值	普通文本角色	`.title` 表示标题视觉角色

子节点： 不接受。

展示效果： 内容按字符串显示；role 表达文本的视觉角色，不指定固定字号、颜色、字符宽度或缩放比例。

数字布局参数表达逻辑尺寸，本文不将其等同于设备像素。单位、数值范围、负数、显式尺寸、溢出、主题与文字测量规则列于规范状态。

Preflight 检查组件名称、参数数量与类型、子节点约束；inflight 保持组件规定的内容和排列效果。未知参数、错误类型或不支持的子节点不能通过静默忽略获得有效语义。

本章组件参数与默认值属于 UI 提案，确定程度与其他语言主题一起记录在规范状态附录。