Skip to Content
示例总览

示例总览

Ansiq 的示例不是“把所有组件堆在一起的展示区”，而是学习路径的一部分。

这一点很重要，因为不同示例承担的是不同角色：

  • 有些示例适合 onboarding
  • 有些示例适合展示 runtime 能力
  • 有些示例更像内部原理参考

如果你按错误顺序阅读，很容易一上来就被复杂场景淹没。

先理解示例的三种角色

1. 入门示例

这类示例要满足两个条件：

  • 足够小，能看清状态和组件树
  • 足够真实，不只是一个空壳页面

目前最适合作为入门示例的是：

它展示了：

  • List
  • 选中态
  • focus traversal
  • footer 更新

没有额外的系统采样、网络请求或复杂布局。

2. 概念示例

这类示例不是给你看“完整产品”，而是专门讲某个概念：

它们适合在你已经理解了基本组件树之后，再去看：

  • shared signal
  • scroll position
  • table state
  • selection continuity

3. Showcase / 内部原理示例

这类示例更接近“真实应用”，它们的重点不是入门，而是让你看到：

  • 多 pane 组合
  • 真实数据
  • 复杂 shell
  • 多层状态和服务的协作

目前属于这一类的是：

它们很好看，也很能展示能力，但不适合做第一印象。

建议阅读顺序

  1. 列表导航
  2. 表格交互
  3. 滚动联动
  4. 活动监视器
  5. OpenAPI Explorer

也可以按问题来找示例

如果你已经不是“从零学起”，而是带着一个具体问题来找答案，更推荐按下面这张索引跳转：

读示例时应该看什么

很多人看示例时会只看界面，但这会错过真正有价值的部分。

更推荐的阅读方式是：

先看这个示例想证明什么

例如：

  • list_navigation 想证明的是小而完整的 app shell
  • scroll_sync 想证明的是共享 signal 和滚动联动
  • activity_monitor 想证明的是固定 shell + 实时刷新

再看它的状态长什么样

你应该先找：

  • signal
  • computed
  • 消息类型
  • 当前示例有哪些 domain state

最后再看组件树

也就是说，不要直接从最底层 widget 开始看。
先看状态，再看结构，最后才看渲染细节。

什么时候该把示例当成“模式”，而不是“代码模板”

示例的价值，不在于让你逐行照抄，而在于让你看见模式：

  • 这个场景为什么要这样拆状态
  • 为什么某块 UI 适合抽成 composition
  • 哪些逻辑应该进 service/sampler

尤其是 activity_monitor 和 openapi_explorer，更适合作为：

  • 结构参考
  • state 组织参考
  • shell 设计参考

而不是一比一复制到你的应用里。

读完这一页后怎么继续

如果你还没真正写过 Ansiq 应用，先去看：

如果你已经做过一个小 app，想理解共享状态和滚动：

如果你想看更完整的应用结构：

Last updated on
Widget 状态活动监视器