状态驱动 UI 实战：解析 easy-loading-cj 中 @State、@Observed、@Publish 的协作原理

状态驱动 UI 实战解析 easy-loading-cj 中 State、Observed、Publish 的协作原理【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cjeasy-loading-cj 是一个提供 27 种 loading/Toast 动画加载效果的 Cangjie仓颉开源组件库。本文将结合它的源码讲清楚状态驱动 UI 的三个核心注解——State、Observed、Publish 是如何协作的帮助新手用最直观的方式理解 Cangjie 的状态管理原理。一、先认识三位主角三个注解各管一摊在 easy-loading-cj 里UI 随数据自动更新靠的是三个注解的分工协作注解作用对象一句话理解Observed数据类如EasyLoadingModel给数据模型开观察窗口Publish数据类的字段标记哪些字段变化时通知 UIState组件中的变量组件持有状态、建立订阅的入口 简单记忆Observed 观察类Publish 发布字段变化State 在组件里订阅。三者串起来就是数据一变界面自动刷新的完整链路。二、Observed Publish让数据可被观察整个库的数据核心是 EasyLoadingModel。它被Observed装饰类里几乎所有字段——指示器类型、宽高、背景色、透明度、缩放/旋转参数——都用Publish标注Observed作用在类上让框架知道这是一个可观察的数据模型Publish作用在字段上表示这个字段一旦变化订阅了它的 UI 就要重新渲染。这正是为什么你在 feature_api.md 里看到的setText()、setWidth()等链式方法改完数据后界面能立刻跟着变——每个 setter 最终都是在改一个Publish字段。三、State组件与数据模型的订阅入口再看组件一侧。EasyLoading 组件 内部声明了State var model: EasyLoadingModel—— 组件用State持有这个模型build()中所有渲染都直接读this.model.visibility、this.model.scaleFrom等字段见 easy_loading.cj 的 build 实现。 协作原理State建立了组件 ↔ 数据的订阅关系当Publish字段变化时框架精准刷新用到该字段的那部分 UI而不是整页重绘。这也是状态驱动 UI比手动刷 UI高效的关键。四、一次点击的完整链路show() 如何驱动 UI以最简单的 sample_TT 示例 为例一次显示 loading的状态流转只有 4 步触发示例在aboutToAppear()中调用loadingModel.setVisibility(Visibility.Visible)改状态show() 把Publish的visibility改为Visible走动画如果配置了动画showAnimator() 通过animateTo让scaleFrom、rotateFrom等状态字段从初始值过渡到目标值动画本质就是状态的连续变化刷界面build()读取这些字段遮罩、缩放、旋转效果自动呈现。 注意第 3 步没有一行手动更新视图的代码。UI 永远只是状态的镜像这是状态驱动最核心的思想。五、子组件同样遵循这套模式以 Circle 为例这个模型 组件的双层结构在子动画里被反复复用。看 circle.cjCircleModel是Observed类size、colors、duration全部PublishCircleComponent用State持有模型并用State的ObservedArrayList存放 12 个小圆点的缩放值——数组元素变化同样能触发刷新onAppear时为每个圆点启动循环动画不断改写数组状态圆点就此起彼伏。toast.cj 中的 Toast 也是同一套路ToastModel可观察ToastIndicator订阅渲染。理解了一个就理解了全部 27 种动画。六、新手常见疑问Q1为什么不能写个普通 class 存数据普通类的字段变化框架感知不到UI 不会刷新。ObservedPublish正是补上这条通知线。Q2State 和 Publish 到底差在哪Publish管字段级变化通知写在模型内部State管组件级持有与订阅写在组件里。一个在数据端发布一个在视图端接收。Q3动画为什么要改状态字段而不是直接改视图因为状态是可恢复、可组合的见hide()的对称实现而且框架能把状态变化与渲染帧对齐动画更顺滑。七、相关文件索引主组件与渲染逻辑easy_loading.cj数据模型与 show/hide 动画easy_loading_model.cj27 种动画效果源码目录easyloading/src/main/cangjie/src/完整 API 文档doc/feature_api.md使用说明与集成方式README.md小结easy-loading-cj 用一套极简的三层协作——State 持有、Observed 观察、Publish 发布——实现了 27 种 loading 与 Toast 动画的数据一变界面自现。掌握这套模式你不仅能读懂本项目写自己的 Cangjie 动画组件时也能直接复用这套思路把 UI 写成状态的函数剩下的交给框架。✨【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考