Skip to Content
示例滚动联动

滚动联动

这个示例展示了 Ansiq 很有代表性的一种模式:一个 signal 驱动多个视图。

它展示了:

  • ScrollView
  • Scrollbar
  • 共享滚动状态
  • focus-aware scrolling
滚动联动里的状态流
1一个 offset signal 持有当前滚动位置
2ScrollView 读取并更新 offset
3Scrollbar 读取并更新同一个 offset
4底部文本从同一个 state 派生
5runtime 保持这三个区域同步

运行方式:

cargo run -p ansiq-examples --example scroll_sync
滚动联动的终端效果图

真实运行的 scroll_sync 示例界面,展示 ScrollViewScrollbar 的联动。

这个示例主要用到哪些 widgets

这个示例真正教你什么

它最值得看的不是“怎么画一个滚动条”,而是:

  • 同一个响应式状态如何驱动两个不同 widget
  • 为什么滚动位置应该是显式 state,而不是埋在局部回调里
  • 为什么这种联动特别适合 Ansiq 的 retained runtime

你可以把它理解成:
这是 List/Table 之外,另一类典型的“一个状态驱动多个视图”的例子。

运行时建议观察什么

  1. 焦点在 ScrollViewScrollbar 之间切换时,Up / Down 的行为会变,但 offset 还是同一个
  2. 底部文案不是额外状态,而是从 offset 派生出来的另一个视图
  3. 这个示例展示了如何避免“两个滚动位置不同步”这种常见 bug

对应阅读

  1. ScrollView
  2. Scrollbar
  3. 状态、焦点与输入
  4. 响应式图与 UI 树
Last updated on