从零开始：用 Flutter 构建一个简洁高效的待办事项应用V1.0.0

个人首页： VON
鸿蒙系列专栏：鸿蒙开发小型案例总结
综合案例：鸿蒙综合案例开发
鸿蒙6.0：从0开始的开源鸿蒙6.0.0
鸿蒙5.0：鸿蒙5.0零基础入门到项目实战
Electron适配开源鸿蒙专栏：Electron for OpenHarmony
本文章所属专栏：Flutter for OpenHarmony
项目所属GitCode地址：待办清单V1.0.0

用 Flutter 构建一个简洁高效的待办事项应用V1.0.0

[📋 前言](#📋 前言)
- [🎯 为什么选择待办事项作为入门项目？](#🎯 为什么选择待办事项作为入门项目？)
- [🏗️ 一、项目结构设计：清晰胜于聪明](#🏗️ 一、项目结构设计：清晰胜于聪明)
- [🧱 二、数据模型：定义"任务"的本质](#🧱 二、数据模型：定义“任务”的本质)
- [🖼️ 三、UI 组件拆解：从整体到局部](#🖼️ 三、UI 组件拆解：从整体到局部)
- - [1. 主页面：`HomeScreen`](#1. 主页面：HomeScreen)
  - [2. 列表组件：`TodoList`](#2. 列表组件：TodoList)
  - [3. 单项组件：`TodoItem`](#3. 单项组件：TodoItem)
- [➕ 四、添加新任务：对话框交互](#➕ 四、添加新任务：对话框交互)
- [🎨 五、运行效果预览](#🎨 五、运行效果预览)
- [🔜 六、下一步优化方向](#🔜 六、下一步优化方向)
- [💡 结语：小应用，大收获](#💡 结语：小应用，大收获)

📋 前言

"完成一件事，就划掉一项"------这是待办清单最朴素的魅力。

而用 Flutter 实现它，不仅能让你掌握跨平台开发的核心技能，还能亲手打造一个真正可用的工具。

本文将带你一步步构建一个结构清晰、可扩展的 Flutter To-Do 应用，涵盖项目架构设计、状态管理、组件拆分等关键概念，助你迈出 Flutter 实战的第一步。

🎯 为什么选择待办事项作为入门项目？

待办应用虽小，却五脏俱全：

✅ 列表渲染（ListView.builder）
✅ 用户交互（添加、勾选）
✅ 状态管理（任务完成状态）
✅ 对话框输入（AlertDialog + TextField）
✅ 组件化思维（分离 UI 与逻辑）

它是学习 Flutter 的"黄金练习题"。

🏗️ 一、项目结构设计：清晰胜于聪明

良好的目录结构是可维护性的基石。我们采用经典的分层模式：

复制代码

lib/
├── main.dart              # 应用入口
├── models/                # 数据模型
│   └── todo.dart
├── screens/               # 页面级组件
│   └── home_screen.dart
└── widgets/               # 可复用 UI 组件
    ├── todo_list.dart
    └── todo_item.dart

💡 原则：

models：纯数据，无 UI

screens：页面容器，持有状态

widgets：无状态或受控组件，专注渲染

这种结构让代码易于阅读、测试和扩展。

🧱 二、数据模型：定义"任务"的本质

在 lib/models/todo.dart 中，我们定义了最核心的数据结构：

dart 复制代码

class Todo {
  String title;
  bool isDone;

  Todo({required this.title, this.isDone = false});
}

title：任务内容（字符串）
isDone：完成状态（布尔值，默认未完成）

🔑 注意：这里使用 可变字段（非 final），是为了在简单示例中直接修改状态。在大型项目中，建议使用不可变对象 + 状态管理库（如 Provider）。

🖼️ 三、UI 组件拆解：从整体到局部

1. 主页面：`HomeScreen`

HomeScreen 是整个应用的"大脑"：

持有 _todos 列表（状态）
提供 _addTodo 和 _toggleTodoStatus 方法（状态变更）
渲染 TodoList 并传递回调函数

dart 复制代码

class _HomeScreenState extends State<HomeScreen> {
  final List<Todo> _todos = [...];

  void _addTodo(String title) { ... }
  void _toggleTodoStatus(int index) { ... }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TodoList(todos: _todos, toggleStatus: _toggleTodoStatus),
      floatingActionButton: FloatingActionButton(onPressed: _addTodoDialog),
    );
  }
}

✅ 这体现了 StatefulWidget 的典型用法：状态在 State 类中管理，UI 响应状态变化。

2. 列表组件：`TodoList`

TodoList 是一个 无状态组件（StatelessWidget），只负责渲染：

dart 复制代码

class TodoList extends StatelessWidget {
  final List<Todo> todos;
  final Function(int) toggleStatus;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return TodoItem(
          todo: todos[index],
          toggleStatus: () => toggleStatus(index),
        );
      },
    );
  }
}

接收 todos 列表和 toggleStatus 回调
使用 ListView.builder 高效渲染长列表

3. 单项组件：`TodoItem`

每个任务项的 UI 封装在 TodoItem 中：

dart 复制代码

class TodoItem extends StatelessWidget {
  final Todo todo;
  final Function toggleStatus;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(todo.title,
        style: TextStyle(
          decoration: todo.isDone ? TextDecoration.lineThrough : TextDecoration.none,
        )),
      trailing: Checkbox(
        value: todo.isDone,
        onChanged: (value) => toggleStatus(),
      ),
    );
  }
}

根据 isDone 决定是否显示删除线
点击复选框触发父组件的状态更新

🔄 数据流 ：
TodoItem → 调用 toggleStatus() → HomeScreen 修改 _todos[index].isDone → Flutter 自动重建 UI

➕ 四、添加新任务：对话框交互

通过 FloatingActionButton 触发添加流程：

dart 复制代码

void _addTodoDialog() {
  final controller = TextEditingController();
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      content: TextField(controller: controller),
      actions: [
        TextButton(onPressed: () { Navigator.pop(context); }, child: Text('取消')),
        TextButton(onPressed: () {
          Navigator.pop(context);
          _addTodo(controller.text);
        }, child: Text('添加')),
      ],
    ),
  );
}

使用 TextEditingController 获取输入内容
对话框关闭后才添加任务，避免空值

🎨 五、运行效果预览

启动应用后，你将看到：

AppBar 标题："代办事项"
初始两条示例任务
每条任务左侧为标题，右侧为复选框
已完成任务自动添加删除线
点击右下角 "+" 按钮可添加新任务

---

🔜 六、下一步优化方向

当前版本功能完整但基础，你可以尝试以下增强：

功能	实现建议
数据持久化	使用 `shared_preferences` 或 `hive` 保存任务
删除任务	长按或滑动删除（`Dismissible`）
编辑任务	点击任务进入编辑页
分类/标签	添加 `category` 字段
搜索/过滤	按"全部/未完成/已完成"筛选
主题切换	支持深色模式

例如，添加删除功能只需在 TodoItem 中包裹 Dismissible：

dart 复制代码

Dismissible(
  key: Key(todo.title),
  onDismissed: (direction) {
    // 调用删除回调
  },
  child: TodoItem(...),
)

💡 结语：小应用，大收获

这个待办事项应用虽然只有几十行核心代码，却涵盖了 Flutter 开发的核心范式：

声明式 UI
组件化拆分
状态向下传递，事件向上冒泡
响应式更新

🌟 记住：所有复杂应用，都是从一个简单的列表开始的。

现在，打开你的 IDE，运行 flutter create todo_app，把这份代码变成你自己的第一个作品吧！

从零开始：用 Flutter 构建一个简洁高效的待办事项应用V1.0.0

用 Flutter 构建一个简洁高效的待办事项应用V1.0.0

📋 前言

🎯 为什么选择待办事项作为入门项目？

🏗️ 一、项目结构设计：清晰胜于聪明

🧱 二、数据模型：定义"任务"的本质

🖼️ 三、UI 组件拆解：从整体到局部

1. 主页面：HomeScreen

2. 列表组件：TodoList

3. 单项组件：TodoItem

➕ 四、添加新任务：对话框交互

🎨 五、运行效果预览

🔜 六、下一步优化方向

💡 结语：小应用，大收获

1. 主页面：`HomeScreen`

2. 列表组件：`TodoList`

3. 单项组件：`TodoItem`