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