小结与练习

本章要点

• Node 是 UI 的基本单元，和 Transform 在世界空间中的角色类似。spawn Node 时，Bevy 自动插入 ComputedNode、BackgroundColor、ZIndex 等配套组件。
• Val 枚举提供六种尺寸单位：Px（逻辑像素）、Percent（相对父容器）、Vw/Vh（相对视口宽高）、VMin/VMax（相对视口较短/较长边）。
• Flexbox 布局通过 flex_direction（Row/Column）、justify_content（主轴分布）、align_items（交叉轴对齐）、flex_grow（分配剩余空间）控制一维排列。
• Grid 布局通过 Display::Grid + grid_template_columns/rows + GridTrack 控制二维排列，用 GridPlacement::span(n) 跨列/跨行。
• 层叠默认后 spawn 的在上面；ZIndex 控制同级层叠，GlobalZIndex 控制全局层叠。
• PositionType::Absolute 让节点脱离文档流，相对于父节点边界定位——HUD 元素的标准做法。
• Camera2d 是 UI 渲染的必要条件。
• Text + TextFont + TextColor 显示文字，TextSpan 实现多段文本。
• ImageNode 显示图片，BackgroundColor 显示纯色背景。

练习

1. 九宫格：用 Grid 布局创建一个 3×3 的彩色格子，每个格子里放一个数字文本。提示：RepeatedGridTrack::flex(3, 1.0)。

2. 动态侧边栏：在 Listing 28-5 的基础上，添加一个系统，按 S 键切换侧边栏的 Display::Flex / Display::None，观察主内容区是否自动填满。

3. 倒计时 HUD：创建一个居中显示的倒计时文本（从 10 倒数到 0），每秒更新一次 Text 的内容。提示：用 Res<Time> 和 Timer（第 18 章）。

4. 层叠实验：spawn 几个重叠的 Absolute 定位色块，分别给不同的 ZIndex 和 GlobalZIndex 值，运行观察层叠效果是否符合预期。