90 lines
3.1 KiB
Markdown
90 lines
3.1 KiB
Markdown
# 12. UI 组件
|
|
|
|
本章是官方基础组件的用法参考，定义本文 UI 草案中的参数、默认值和展示效果。示例是 `bob:shop.ui` 场景 render 内的节点片段。
|
|
|
|
官方库的 key 和引用形式尚未定义，来源约定见[场景与渲染树](11-scenes-and-render-trees.md)。用户库提供的组件则以其实际声明为准。
|
|
|
|
## 12.1 Column
|
|
|
|
Column 从上到下排列子节点。
|
|
|
|
```endorphin
|
|
Column(gap: 12, padding: 24) {
|
|
Text("First")
|
|
Text("Second")
|
|
}
|
|
```
|
|
|
|
| 参数 | 值类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| `gap` | 数字 | `0` | 相邻子节点的垂直间距 |
|
|
| `padding` | 数字 | `0` | 四个方向的内边距 |
|
|
|
|
**子节点：** 接受零个或多个节点。
|
|
|
|
**布局效果：** 在本文简单内容布局模型中，宽度为最宽子节点宽度加左右内边距；高度为子节点高度、相邻间距和上下内边距之和。空容器没有子节点间距。
|
|
|
|
## 12.2 Row
|
|
|
|
Row 从左到右排列子节点。
|
|
|
|
```endorphin
|
|
Row(gap: 8, padding: 4) {
|
|
Text("Left")
|
|
Text("Right")
|
|
}
|
|
```
|
|
|
|
| 参数 | 值类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| `gap` | 数字 | `0` | 相邻子节点的水平间距 |
|
|
| `padding` | 数字 | `0` | 四个方向的内边距 |
|
|
|
|
**子节点：** 接受零个或多个节点。
|
|
|
|
**布局效果：** 在本文简单内容布局模型中，宽度为子节点宽度、相邻间距和左右内边距之和；高度为最高子节点高度加上下内边距。空容器没有子节点间距。
|
|
|
|
## 12.3 Spacer
|
|
|
|
Spacer 占据布局空间，不显示可见内容。
|
|
|
|
```endorphin
|
|
Spacer(size: 16)
|
|
```
|
|
|
|
| 参数 | 值类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| `size` | 数字 | `0` | 占位宽度与高度 |
|
|
|
|
**子节点：** 不接受。
|
|
|
|
**布局效果：** 在父组件的排列中占据指定空间。它不是间距参数本身，而是树中的一个节点。
|
|
|
|
## 12.4 Text
|
|
|
|
Text 显示字符串内容。
|
|
|
|
```endorphin
|
|
Text("Product")
|
|
Text("Shop", role: .title)
|
|
```
|
|
|
|
| 参数 | 值类型 | 默认值 | 含义 |
|
|
| --- | --- | --- | --- |
|
|
| 第一个位置参数 | 字符串 | `""` | 显示的文本 |
|
|
| `role` | 符号值 | 普通文本角色 | `.title` 表示标题视觉角色 |
|
|
|
|
**子节点：** 不接受。
|
|
|
|
**展示效果：** 内容按字符串显示；role 表达文本的视觉角色，不指定固定字号、颜色、字符宽度或缩放比例。
|
|
|
|
## 12.5 尺寸与参数检查
|
|
|
|
数字布局参数表达逻辑尺寸，本文不将其等同于设备像素。单位、数值范围、负数、显式尺寸、溢出、主题与文字测量规则列于[规范状态](../appendices/specification-status.md#ui)。
|
|
|
|
Preflight 检查组件名称、参数数量与类型、子节点约束；inflight 保持组件规定的内容和排列效果。未知参数、错误类型或不支持的子节点不能通过静默忽略获得有效语义。
|
|
|
|
本章组件参数与默认值属于 UI 提案，确定程度与其他语言主题一起记录在规范状态附录。
|
|
|
|
[上一章：场景与渲染树](11-scenes-and-render-trees.md) · [附录：形式文法](../appendices/formal-grammar.md) · [目录](../README.md)
|