Skip to Content
示例表格交互

表格交互

这个示例展示了:

  • Table
  • 行选择
  • 键盘导航
  • 摘要更新
表格交互里的选择链路
1Up / Down 改变选中行
2runtime routing 把按键交给 Table
3选中行进入 state
4摘要文案从选中行派生
5runtime 只重绘真正变化的区域

运行方式:

cargo run -p ansiq-examples --example table_interaction
表格交互的终端效果图

真实运行的 table_interaction 示例界面。

这个示例主要用到哪些 widgets

这个示例适合学习什么

它适合在你已经理解 List 之后再看,因为它把同样的选择模型推进到了更结构化的数据上:

  • 多列数据如何进入同一个 widget
  • 为什么选中态应该和行数据分开
  • 为什么摘要区最好从选中态派生,而不是复制一份单独状态

读代码时先看什么

建议先看:

  1. 行数据长什么样
  2. 当前选中项怎么保存
  3. 摘要文案怎么由选中项派生
  4. 最后再看 Table 的 props

对应阅读

  1. Table
  2. 组件使用模式
  3. 状态、焦点与输入
  4. 布局与渲染
Last updated on