当前位置：首页 > news >正文

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

news 2026/5/12 18:45:28

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

在 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触发整个列表重建，确保样式更新。