102 lines
3.4 KiB
Markdown
102 lines
3.4 KiB
Markdown
# 11. 场景与渲染树
|
||
|
||
场景声明描述一个 UI 视图。render 块包含该视图的渲染树，树中的节点表示组件、参数和子节点。
|
||
|
||
## 11.1 场景声明
|
||
|
||
代码归属：`bob:shop.ui`。
|
||
|
||
```endorphin
|
||
export scene Main {
|
||
render {
|
||
Column(gap: 12, padding: 24) {
|
||
Text("Shop", role: .title)
|
||
Row(gap: 8) {
|
||
Text("Price")
|
||
Spacer(size: 4)
|
||
Text("90")
|
||
}
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
Main 是场景名。Column 是根节点，包含一个标题和一个横向排列的 Row。
|
||
|
||
本章使用[UI 组件](12-ui-components.md)中的官方组件。官方库的 key 和引用形式未定义，示例仅省略这一依赖部分，不表示官方组件属于任何示例用户库或必然免导入可用。
|
||
|
||
## 11.2 render 与单根结构
|
||
|
||
本文场景文法要求一个场景包含一个 render 块，render 中恰好包含一个根节点。
|
||
|
||
多个同级节点放入同一个布局根节点。下面是 render 内的有效节点片段：
|
||
|
||
```endorphin
|
||
Column {
|
||
Text("First")
|
||
Text("Second")
|
||
}
|
||
```
|
||
|
||
两个 Text 是 Column 的子节点，不是两个 render 根节点。单根规则仅约束 render 内部，不限制 namespace 只能有一个声明。
|
||
|
||
## 11.3 节点形式
|
||
|
||
节点包含组件名、可选参数列表和可选子节点块：
|
||
|
||
```text
|
||
组件名
|
||
组件名(参数列表)
|
||
组件名(参数列表) { 子节点 }
|
||
```
|
||
|
||
组件名是标识符。省略参数列表与空参数列表都表示没有显式参数；默认值由组件约定决定。
|
||
|
||
渲染节点片段：
|
||
|
||
```endorphin
|
||
Column {}
|
||
Spacer(size: 16)
|
||
Text("Product")
|
||
```
|
||
|
||
这三行分别展示空容器、带命名参数的节点和带位置参数的节点，不是一个具有三个根的完整 render 块。
|
||
|
||
## 11.4 参数
|
||
|
||
位置参数按参数位置表达输入，命名参数用 `参数名: 表达式`：
|
||
|
||
```endorphin
|
||
Text("Product", role: .title)
|
||
```
|
||
|
||
字符串为第一个位置参数，role 为命名参数。参数按逗号分隔，不使用尾随逗号。命名参数与位置参数可以在节点形式中共存，具体绑定与重复传参规则见[规范状态](../appendices/specification-status.md#ui)。
|
||
|
||
参数引用通用表达式文法，但 render 中允许哪些调用、状态读取和修改效果，需要另外规定；文法可以表达一种形式不等于该形式在所有渲染上下文中合法。
|
||
|
||
## 11.5 子节点与嵌套
|
||
|
||
子节点由花括号包围，相邻节点不使用逗号或分号。布局组件可以递归嵌套：
|
||
|
||
```endorphin
|
||
Column(gap: 12) {
|
||
Text("Shop", role: .title)
|
||
Row(gap: 8) {
|
||
Text("Left")
|
||
Text("Right")
|
||
}
|
||
}
|
||
```
|
||
|
||
Column 从上到下排列标题与 Row，Row 从左到右排列两段文本。结构文法允许子节点块，组件语义决定具体组件是否接受子节点；Text 和 Spacer 的用法不接受子节点。
|
||
|
||
## 11.6 检查与展示
|
||
|
||
Preflight 检查场景结构、单根约束、组件名称、参数和子节点是否合法。不合法节点或参数应得到诊断，而不是静默替换为别的组件或默认参数。
|
||
|
||
inflight 展示声明的内容与排列关系。渲染树不指定绘制协议、字体引擎或某个布局计算必须发生在哪一阶段。
|
||
|
||
数据绑定、事件、加载状态和界面更新的具体语法见[规范状态](../appendices/specification-status.md#ui)。
|
||
|
||
[上一章：数据读取](10-data-access.md) · [下一章：UI 组件](12-ui-components.md) · [目录](../README.md)
|