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