列表导航

这是目前最适合作为第一印象的示例：它足够小，但已经像一个真实应用。

和很多“只放一个按钮或一行文本”的 hello world 不一样，这个示例已经有：

• 一个主内容区域
• 一个可选中的列表
• 一个 footer
• 可以感知选择变化的界面

也就是说，它已经具备了一个真正 TUI 小应用最基本的形状。

这个示例展示了什么

• List
• focus traversal
• selection 变化
• footer 更新

这个示例主要用到哪些 widgets

• List
• StatusBar
• Text
• Box

为什么它适合作为第一个示例

因为它没有引入任何会分散注意力的东西：

• 没有后台采样
• 没有远程加载
• 没有复杂 viewport/history 语义
• 没有多 pane shell

这样你可以只把注意力放在这几件事上：

• 状态怎么建模
• 组件树怎么声明
• 交互怎么进入 runtime
• 选中态如何影响界面

运行方式

cargo run -p ansiq-examples --example list_navigation

真实运行的 list_navigation 示例界面。

运行后建议你做三件事：

1. 用 Up / Down 移动选中项
2. 观察 footer 如何跟着更新
3. 用 Tab 看焦点是否会离开列表

这三步能帮你快速建立一个直觉：
Ansiq 不是只会“画界面”，而是已经有一整条状态到 patch 的运行链路。

读代码时先看什么

建议按这个顺序读：

1. 场景 state
2. render() 里声明的组件树
3. 列表项和 footer 如何从 state 派生

如果你一开始就盯着 widget builder 的每个参数，很容易丢掉这个示例真正要教你的东西。

这个示例没有展示什么

为了保持它的入门属性，这个示例故意没有展示：

• continuity key
• scrollback/history
• 复杂 shell
• 远程或系统 IO

这些能力在 Ansiq 里同样重要，但不该在第一步同时学习。

对应的内部原理

如果你已经理解了表层交互，这个示例最适合继续对照：

• Runtime Loop
• 响应式图与 UI 树

学完这个示例后应该去哪

如果你已经理解了：

• 列表的选中态
• 一个简单 app shell 的形状
• footer 如何响应 state

下一步最适合去看：

• 表格交互
• 或 快速开始 与 你的第一个应用

如果你想把这个示例和 Guide 对起来，可以按这个顺序读：

1. 快速开始
2. 你的第一个应用
3. 状态、焦点与输入