滚动联动
这个示例展示了 Ansiq 很有代表性的一种模式:一个 signal 驱动多个视图。
它展示了:
ScrollViewScrollbar- 共享滚动状态
- focus-aware scrolling
1一个 offset signal 持有当前滚动位置
2ScrollView 读取并更新 offset
3Scrollbar 读取并更新同一个 offset
4底部文本从同一个 state 派生
5runtime 保持这三个区域同步
运行方式:
cargo run -p ansiq-examples --example scroll_sync
真实运行的 scroll_sync 示例界面,展示 ScrollView 和 Scrollbar 的联动。
这个示例主要用到哪些 widgets
这个示例真正教你什么
它最值得看的不是“怎么画一个滚动条”,而是:
- 同一个响应式状态如何驱动两个不同 widget
- 为什么滚动位置应该是显式 state,而不是埋在局部回调里
- 为什么这种联动特别适合 Ansiq 的 retained runtime
你可以把它理解成:
这是 List/Table 之外,另一类典型的“一个状态驱动多个视图”的例子。
运行时建议观察什么
- 焦点在
ScrollView和Scrollbar之间切换时,Up / Down的行为会变,但 offset 还是同一个 - 底部文案不是额外状态,而是从 offset 派生出来的另一个视图
- 这个示例展示了如何避免“两个滚动位置不同步”这种常见 bug
对应阅读
Last updated on