news 2026/6/9 23:23:45

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
构建 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 列表状态管理实战模板；
  • 无依赖实用组件开发经验。

用简单，服务日常。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/6/9 4:37:27

探索LabVIEW通用视觉软件框架：解锁机器视觉的无限可能

labview通用视觉软件框架&#xff0c;机器视觉通用框架 通用视觉框 架源代码。 可以参考用于开发常规案例。在机器视觉领域&#xff0c;拥有一个高效、通用的视觉软件框架就如同手握一把万能钥匙&#xff0c;能开启众多应用场景的大门。今天咱们就来深入聊聊LabVIEW通用视觉软件…

作者头像 李华
网站建设 2026/6/6 17:47:12

基于MATLAB的8个OFDM-Chirp波形时频域及模糊函数分析

一、核心原理与算法设计 1. OFDM-Chirp波形生成信号结构&#xff1a;将线性调频&#xff08;Chirp&#xff09;信号作为OFDM子载波&#xff0c;通过IFFT实现多载波调制。数学表达&#xff1a;其中&#xff0c;ααα为Chirp斜率&#xff0c;fkf_kfk​为子载波频率&#xff0c;T…

作者头像 李华
网站建设 2026/6/6 16:05:50

Linux MDIO子系统深度剖析：从原理到实践（5）

接前一篇文章&#xff1a;Linux MDIO子系统深度剖析&#xff1a;从原理到实践&#xff08;4&#xff09; 五、用户空间访问实例 1. 使用ioctl访问PHY寄存器 虽然大多数情况下PHY的管理由内核驱动自动处理&#xff0c;但在调试或特殊应用场景中&#xff0c;用户空间程序可能需…

作者头像 李华
网站建设 2026/6/6 16:25:43

理解扩展特征【技术文档】

摘要 本文详细介绍了将一个特征&#xff08;称为基础特征&#xff09;通过另一个特征&#xff08;称为扩展特征&#xff09;进行扩展的机制。 概念 一张解释概念的图片&#xff1a; 图.1 概念 基础特征可以是任何类型的特征&#xff0c;可以是达索系统的原始特征也可以是用户…

作者头像 李华
网站建设 2026/6/6 21:28:23

使用扩展特征【用户示例】

摘要 本文讨论了CAAFmExtExtensionManagement用例。它主要处理扩展特征的相关操作。这些扩展特征是在《定义扩展特征》1中定义的。 理解本用例的先决条件是理解扩展特征的概念2。 您将通过本用例学习什么 本用例教授用户如何操作扩展特征。主要学习内容如下&#xff1a; 为…

作者头像 李华