构建 OpenHarmony 简易待办事项清单：用状态驱动实现最小可行任务管理-开发者社区

一、为什么需要“简易待办事项清单”？

在 OpenHarmony 的多设备协同场景中，用户常需快速记录临时任务：

购物清单（手机录入，车机查看）；
会议要点（平板记录，手表提醒）；
家务分配（智慧屏共享）。

但许多待办应用过度复杂：

账号登录；
云同步；
分类标签；
截止日期。

而一个纯本地、即时、无干扰的清单，反而更适合短时、轻量、一次性任务。它不承诺持久化，只提供“此刻可用”的工具价值。

本文将构建一个极简页面：「简易待办事项清单」。它只包含：

一个文本输入框（用于输入任务）；
一个“添加”按钮；
一个可滚动的任务列表，每项左侧带 Checkbox，勾选后文字显示删除线。

所有数据保存在List<Task>中，关闭应用即清空，符合“临时便签”定位。

二、完整可运行代码

// lib/main.dartimport'package:flutter/material.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'待办清单',debugShowCheckedModeBanner:false,theme:ThemeData(useMaterial3:true,colorScheme:ColorScheme.fromSeed(seedColor:Colors.pink)),home:constTodoListPage(),);}}classTask{finalStringcontent;bool completed;Task(this.content):completed=false;}classTodoListPageextendsStatefulWidget{constTodoListPage({super.key});@overrideState<TodoListPage>createState()=>_TodoListPageState();}class_TodoListPageStateextendsState<TodoListPage>{finalTextEditingController_controller=TextEditingController();finalList<Task>_tasks=[];void_addTask(){finaltext=_controller.text.trim();if(text.isNotEmpty){setState((){_tasks.add(Task(text));_controller.clear();});}}void_toggleTask(int index){setState((){_tasks[index].completed=!_tasks[index].completed;});}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('简易待办清单')),body:Column(children:[Padding(padding:constEdgeInsets.all(16),child:Row(children:[Expanded(child:TextField(controller:_controller,decoration:constInputDecoration(hintText:'输入任务...'),onSubmitted:(_)=>_addTask(),),),IconButton(onPressed:_addTask,icon:constIcon(Icons.add)),],),),Expanded(child:ListView.builder(itemCount:_tasks.length,itemBuilder:(context,index){finaltask=_tasks[index];returnCheckboxListTile(title:Text(task.content,style:TextStyle(decoration:task.completed?TextDecoration.lineThrough:TextDecoration.none,),),value:task.completed,onChanged:(bool?value){if(value!=null){_toggleTask(index);}},);},),),],),);}}

三、核心思想：状态即数据，UI 即视图

待办清单的本质是状态的可视化：

每个任务是一个对象（Task）；
对象有两个属性：content（内容）和completed（是否完成）；
UI 根据completed值决定是否显示删除线；
用户操作（添加/勾选）直接修改状态，触发 UI 重建。

这种“状态 → 视图”的单向数据流，是 Flutter 的核心范式，也是构建可靠 UI 的基石。

四、任务模型与状态管理：

我们首先看任务数据结构与添加逻辑：

classTask{finalStringcontent;bool completed;Task(this.content):completed=false;}void_addTask(){finaltext=_controller.text.trim();if(text.isNotEmpty){setState((){_tasks.add(Task(text));_controller.clear();});}}

这段代码定义了最小可行任务模型。

Task类：
- content为final，创建后不可变（内容不应被意外修改）；
- completed为可变bool，表示任务状态；
- 构造函数默认completed = false，符合新任务未完成的常识。
_addTask方法：
- trim()去除首尾空格，避免“空任务”；
- isNotEmpty确保非空才添加；
- setState包裹_tasks.add(...)和_controller.clear()，保证状态与 UI 同步；
- 添加后立即清空输入框，提升连续输入体验。

💡 此设计不验证重复任务——允许用户添加多个相同任务（如“买牛奶”两次），符合真实使用场景。

五、动态样式与交互反馈：

再看任务列表渲染逻辑：

CheckboxListTile(title:Text(task.content,style:TextStyle(decoration:task.completed?TextDecoration.lineThrough:TextDecoration.none,),),value:task.completed,onChanged:(bool?value){if(value!=null){_toggleTask(index);}},);

这里展示了状态驱动样式的典型用法。

TextDecoration.lineThrough：
- 当task.completed == true时，文字显示删除线；
- 否则正常显示；
- 这是 Flutter 内置文本装饰，无需自定义绘制；
CheckboxListTile：
- 是 Material Design 标准组件，自动处理布局、间距、点击反馈；
- value控制 Checkbox 状态；
- onChanged回调中，显式检查value != null（API 设计要求）；
_toggleTask(index)：
- 通过索引修改_tasks中对应任务的completed值；
- setState触发整个列表重建，确保样式更新。

📌 值得注意的是，未使用ListView.separated或自定义分割线，因为CheckboxListTile已自带足够视觉分隔，保持界面清爽。

六、为何这个清单适合 OpenHarmony 场景？

1. 轻量无负担

无账号、无同步、无设置；
关闭即清空，避免隐私残留；
适合临时记录（如“待会要做的事”）。

2. 多端一致体验

在手表上：大触控区域便于勾选；
在平板上：列表可容纳更多任务；
在智慧屏上：作为家庭共享白板。

3. 教学价值

演示StatefulWidget管理列表状态；
展示CheckboxListTile与动态样式的组合；
体现“输入-状态-视图”闭环。

七、工程注意事项

1. 性能

ListView.builder仅构建可见项，即使有 100 条任务也流畅；
Task对象轻量，内存占用低。

2. 可访问性

CheckboxListTile自带无障碍支持（TalkBack 可读）；
删除线不影响屏幕阅读器内容（仍读原文）。

3. 扩展建议（保持核心简洁）

清除已完成：增加“清理”按钮；
任务计数：显示“3/5 已完成”；
长按删除：但会增加交互复杂度，本文未实现。

八、结语：最小功能，最大价值

本文的页面仅 69 行代码，却完整实现了一个可用、可靠、直观的待办清单。它没有花哨功能，只有清晰的状态、即时的反馈、一致的体验。

在 OpenHarmony 的分布式世界中，我们常被“跨端协同”所吸引，但不应忘记：最好的工具，往往是那个打开就能用、用完就走的那一个。

这个小小的清单，正是对这一理念的践行。

🌐欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net/

在这里，您将获得：

OpenHarmony 轻量级工具应用设计指南；
Flutter 列表状态管理实战模板；
无依赖实用组件开发经验。

用简单，服务日常。

构建 OpenHarmony 简易待办事项清单：用状态驱动实现最小可行任务管理