11. 场景与渲染树

场景声明描述一个 UI 视图。render 块包含该视图的渲染树，树中的节点表示组件、参数和子节点。

11.1 场景声明

代码归属：bob:shop.ui。

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 组件中的官方组件。官方库的 key 和引用形式未定义，示例仅省略这一依赖部分，不表示官方组件属于任何示例用户库或必然免导入可用。

11.2 render 与单根结构

本文场景文法要求一个场景包含一个 render 块，render 中恰好包含一个根节点。

多个同级节点放入同一个布局根节点。下面是 render 内的有效节点片段：

Column {
    Text("First")
    Text("Second")
}

两个 Text 是 Column 的子节点，不是两个 render 根节点。单根规则仅约束 render 内部，不限制 namespace 只能有一个声明。

11.3 节点形式

节点包含组件名、可选参数列表和可选子节点块：

组件名
组件名(参数列表)
组件名(参数列表) { 子节点 }

组件名是标识符。省略参数列表与空参数列表都表示没有显式参数；默认值由组件约定决定。

渲染节点片段：

Column {}
Spacer(size: 16)
Text("Product")

这三行分别展示空容器、带命名参数的节点和带位置参数的节点，不是一个具有三个根的完整 render 块。

11.4 参数

位置参数按参数位置表达输入，命名参数用 参数名: 表达式：

Text("Product", role: .title)

字符串为第一个位置参数，role 为命名参数。参数按逗号分隔，不使用尾随逗号。命名参数与位置参数可以在节点形式中共存，具体绑定与重复传参规则见规范状态。

参数引用通用表达式文法，但 render 中允许哪些调用、状态读取和修改效果，需要另外规定；文法可以表达一种形式不等于该形式在所有渲染上下文中合法。

11.5 子节点与嵌套

子节点由花括号包围，相邻节点不使用逗号或分号。布局组件可以递归嵌套：

Column(gap: 12) {
    Text("Shop", role: .title)
    Row(gap: 8) {
        Text("Left")
        Text("Right")
    }
}

Column 从上到下排列标题与 Row，Row 从左到右排列两段文本。结构文法允许子节点块，组件语义决定具体组件是否接受子节点；Text 和 Spacer 的用法不接受子节点。

11.6 检查与展示

Preflight 检查场景结构、单根约束、组件名称、参数和子节点是否合法。不合法节点或参数应得到诊断，而不是静默替换为别的组件或默认参数。

inflight 展示声明的内容与排列关系。渲染树不指定绘制协议、字体引擎或某个布局计算必须发生在哪一阶段。

数据绑定、事件、加载状态和界面更新的具体语法见规范状态。

上一章：数据读取 · 下一章：UI 组件 · 目录

3.4 KiB Raw Blame History Unescape Escape