# 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)