用 AI DevSpace 体验版搭建鸿蒙待办清单：从 ArkTS 状态管理到云端同步的实践笔记

昨天用 AI DevSpace 体验版跑通鸿蒙数独小游戏之后，我想把同一套“云端写代码、不用配本地环境”的流程，再用在一个更贴近日常的场景上：待办清单。它看起来简单，却刚好能串起 ArkTS 声明式 UI、状态管理、本地持久化和云端同步这几块鸿蒙开发的核心拼图。本文记录我今天在 AI DevSpace 体验版里搭建一个云同步待办清单的完整过程，以及踩过的几个坑。

一、为什么选待办清单练手
数独重在算法和界面交互，待办清单重在数据流。一个待办项从新建、勾选完成、删除到多端同步，走完一圈，基本就摸清了一个鸿蒙应用的数据生命周期。而且待办清单的需求人人都能理解，写代码时不容易在业务上绕弯子，可以把注意力放在 ArkTS 的写法和云端能力的接法上。对新手来说，这种“小而完整”的项目，比一上来就做大而全的应用更划算。

二、准备工作：体验版三分钟开箱
我还是走成长中心的 AI DevSpace 任务入口，从 AI 办公开发实践中心点“前往 AI DevSpace 实践”，只选免费体验版：秒级启动、免费试用、不消耗额度。进入后新建一个会话，先向 AI Shell 提了一句“用一句话介绍鸿蒙 ArkTS 开发的特点”，确认环境和对话都正常，再开始写代码。体验版数据不保留、时长结束后自动重置，所以重要的代码要及时复制保存到本地，这个习惯一开始就要养成。

三、先把界面跑起来：声明式 UI 与状态管理
待办清单的界面可以拆成三层：顶部的输入框和添加按钮，中间的任务列表，底部的完成统计。ArkTS 的声明式 UI 写起来很直观：在 build() 里描述界面长什么样，框架负责渲染。任务列表用 @State 装饰的数组来存，每一项包含标题、是否完成和创建时间。勾选完成时直接改数组里对应项的状态，界面自动刷新，不用手动调用刷新方法。新增任务时先做判空，空字符串不入队；删除时按下标移除，并顺手更新底部“已完成 X / 共 Y 项”的统计。先让这条最小闭环跑通，再加别的。

四、让数据留下来：本地持久化
只放内存里的数据，关掉应用就没了。下一步是把任务列表存到本地：应用启动时读一次，数据变化时写一次。读写要放在合适的生命周期里，启动读、变化写，不要在每次渲染时反复读写。还要注意异常分支：第一次启动本地还没有数据时给一个空列表，不要让读取失败把界面拖垮。做到这一步，待办清单已经是一个能日常用的小工具了。

五、再进一步：云端同步的取舍
本地够用之后，才值得做云端同步。我的做法是先理清同步的最小规则：以云端数据为准还是以本地为准、冲突时怎么合并、离线操作如何补传。第一版只做“登录后把本地列表上传、换设备时再拉下来”，不同时改同一条数据，冲突概率就很低。等这条路走通，再考虑增量同步和冲突提示。做云端功能时最忌贪多，先保证不丢数据，再谈体验优化。

六、踩过的三个坑
第一个坑是状态装饰器用错层级：把 @State 放在了不该放的地方，子组件改了值父组件没反应，后来改成 @Prop 单向传值、@Link 双向同步才理顺。第二个坑是列表没有给稳定的 key，删除一项后界面错位，补上唯一标识就好了。第三个坑是把同步逻辑写进了渲染函数，界面每次刷新都触发一次请求，改成只在数据变化时触发才恢复正常。这三个坑的共同点是：问题都出在“数据应该在哪里变、什么时候变”上。

结语
从数独到待办清单，两次实践让我确认了一件事：鸿蒙开发的入门门槛，更多在开发环境和数据流的理解上，而不是语法本身。AI DevSpace 体验版把环境这一步抹平了，剩下的就是像待办清单这样，一个小功能一个小功能地把数据流走通。下一步，我打算给这个待办清单加上按日期分组和云端同步的冲突提示，继续用同一套流程把它做完整。