Flutter+三方库+鸿蒙 进阶实战：TODO待办清单

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

一、Flutter、三方库、鸿蒙 三者核心关系

很多新手容易混淆三者的关系，尤其是“为什么有些Flutter三方库不能在鸿蒙上用”，这里用最直白的语言讲清楚，不绕弯、不堆砌专业术语，看完就能明白开发逻辑：

1. 三者核心定位

• 【Flutter】：相当于“设计师+施工队”，负责搭建APP的界面（比如输入框、列表、按钮）和交互（比如点击、滑动），核心优势是“一套代码，多端运行”，包括鸿蒙设备，不用为鸿蒙单独写一套代码。

• 【三方库】：相当于“现成的装修材料”，是其他开发者封装好的功能模块（比如存储数据、下拉刷新、侧滑删除），不用我们从零编写复杂逻辑。但关键是：这些“材料”必须经过“鸿蒙适配”（也就是鸿蒙化），才能在鸿蒙系统上使用，就像装修材料要符合房屋的尺寸、承重，否则无法安装。

• 【鸿蒙（HarmonyOS NEXT / API 20）】：相当于“房子本身”，是APP最终运行的环境（鸿蒙手机、平板等设备），提供系统底层能力（比如允许APP存储数据、调用屏幕、响应触摸），Flutter代码和鸿蒙化三方库，最终都要在鸿蒙系统上“落地运行”。

2. 三者运行逻辑

1. 我们用Flutter编写APP的界面和交互逻辑，相当于“设计房子的格局和装修风格”；

2. 引入鸿蒙化的三方库，相当于“采购适配房子的装修材料”，直接拿来用，节省开发时间；

3. 将编写好的代码，通过DevEco Studio（鸿蒙开发IDE）编译，相当于“把装修材料和设计方案落地到房子里”；

4. 最终在鸿蒙设备上运行，相当于“装修好的房子可以正常居住”，所有功能（点击、存储、刷新）都能正常使用。

3. 开发禁忌

• 禁止使用未经过鸿蒙适配的Flutter三方库：比如某些只支持Android/iOS的库，直接用在鸿蒙项目中会报错、崩溃，甚至无法编译；

• 必须创建“Flutter HarmonyOS Project”：不能创建普通的Flutter Project，否则项目无法适配鸿蒙系统，无法在鸿蒙设备上运行；

• 环境版本固定：本次案例全程使用 DevEco Studio 6.0 + 鸿蒙SDK API 20 + Flutter 3.16.0，版本不匹配会导致各种兼容问题，新手严格按照这个版本配置。

二、本次实战案例详情

本次案例不再是简单的“存储+列表”，而是新增「状态管理」「模型封装」「完成状态切换」等进阶功能，接近企业级基础应用的开发逻辑，同时全程使用鸿蒙化库，无任何未适配组件，每一步都有详细讲解，代码逐段解析，确保新手能跟着操作、看懂逻辑。

2.1 案例基本信息

• 案例名称：Flutter+鸿蒙 进阶TODO待办清单

• 难度：进阶入门（比基础案例难，核心新增“状态管理”和“模型封装”，但每一步都有详细讲解，新手可轻松跟上）

• 核心功能（全部可在鸿蒙API 20设备上稳定运行）：

1. 新增待办事项：输入文字，点击按钮添加到待办列表；

2. 完成状态切换：勾选复选框，标记待办为“已完成”/“未完成”，已完成事项文字自动划线；

3. 下拉刷新：下拉列表，同步最新的待办数据（解决数据同步问题）；

4. 侧滑删除：列表项从右向左滑动，显示删除按钮，点击删除指定待办；

5. 数据持久化：关闭APP、重启设备，待办数据不丢失（进阶核心）；

6. 状态管理：通过Provider管理所有待办数据，实现组件间数据共享（进阶重点，企业级开发常用）。

• 用到的鸿蒙化库（全部经过OpenHarmony官方适配，稳定无坑）：

1. shared_preferences: ^2.2.2（鸿蒙官方适配版，用于本地存储待办数据，实现数据持久化）；

2. provider: ^6.1.1（鸿蒙适配版，状态管理库，用于统一管理待办数据，避免组件间数据混乱）；

3. pull_to_refresh: ^2.0.0（鸿蒙兼容稳定版，实现下拉刷新功能，用法简单，无需手动写刷新动画）；

4. flutter_slidable: ^3.0.0（鸿蒙适配版，实现列表项侧滑删除功能，交互流畅，适配鸿蒙设备触摸逻辑）。

2.2 环境准备

环境配置是基础，一步错就可能导致后续运行失败，严格按照以下步骤操作，确保环境适配：

1. 安装Flutter SDK 3.16.0（稳定版）：

• 下载地址：https://flutter.dev/docs/get-started/install（选择3.16.0稳定版，根据自己的系统（Windows/Mac）下载）；

• 解压路径：必须是“非中文、无空格”（比如Windows：D:\flutter；Mac：/Users/用户名/flutter）；

• 配置环境变量（Windows为例）：

① 右键“此电脑”→“属性”→“高级系统设置”→“环境变量”；

② 系统变量中，新建“FLUTTER_HOME”，变量值填写Flutter解压路径（如D:\flutter）；

③ 找到系统变量中的“Path”，编辑，新增两个路径：%FLUTTER_HOME%\bin 和 %FLUTTER_HOME%\bin\cache\dart-sdk\bin；

④ 保存配置，关闭所有终端（环境变量生效需重启终端）；

• 验证：打开新终端，输入“flutter --version”，显示Flutter 3.16.0和对应Dart版本，即为安装成功。

2. 开启Flutter对鸿蒙的支持：

• 终端输入命令：flutter config --enable-harmony，等待执行完成（无需额外操作，仅开启鸿蒙适配开关）。

3. 安装DevEco Studio 6.0（鸿蒙官方IDE）：

• 下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio/（下载最新版6.0，对应自己的系统）；

• 安装过程：一路下一步，安装时会提示“下载HarmonyOS SDK”，务必勾选“API 20”（鸿蒙NEXT对应版本），默认路径即可，无需修改；

• 安装Flutter插件：打开DevEco Studio，点击顶部“File→Settings→Plugins”，搜索“Flutter”，安装官方插件，安装完成后重启IDE，插件生效。

4. 创建并启动鸿蒙NEXT模拟器：

• 打开DevEco Studio，点击顶部“Tools→Device Manager”（设备管理器）；

• 点击“New Device”，选择“Phone”分类，挑选任意鸿蒙NEXT机型（如Mate 70 Pro），点击“Create”（创建过程需联网，下载机型镜像，适配API 20）；

• 创建完成后，点击模拟器右侧“Start”启动，首次启动较慢，耐心等待，启动后可最小化，后续调试直接使用。

三、实战步骤

本次案例将分4个步骤，从创建项目到编写代码、运行测试，每一步都有详细操作说明，代码逐段解析，告诉你“每一行代码是什么作用”，避免新手“复制粘贴却不懂逻辑”的问题。

步骤1：创建Flutter鸿蒙项目

重点：必须创建“Flutter HarmonyOS Project”，不能创建普通Flutter Project，否则无法适配鸿蒙。

操作步骤：

1. 打开DevEco Studio 6.0，点击顶部“File→New→New Project”；

2. 在弹出的窗口中，左侧选择“Flutter”，右侧选择“Flutter HarmonyOS Project”（注意：不要选“Flutter Project”）；

3. 填写项目基本信息（严格按照要求填写，避免报错）：

• Project name：flutter_harmony_todo（项目名称，小写英文+下划线，禁止中文、空格）；

• Package name：com.example.flutterharmonytodo（包名，默认即可，也可自定义，格式必须是“com.xxx.xxx”）；

• Save location：选择“非中文、无空格”的路径（如Windows：D:\FlutterProjects\flutter_harmony_todo；Mac：/Users/用户名/FlutterProjects/flutter_harmony_todo）；

• Flutter SDK path：点击“Browse”，选择之前安装的Flutter SDK路径（如D:\flutter），IDE会自动识别，若未识别，手动选择；

• HarmonyOS SDK path：默认即可，IDE会自动识别已安装的鸿蒙SDK API 20路径；

4. 填写完成后，点击“Finish”，IDE会自动创建Flutter鸿蒙项目，首次创建需联网下载依赖，时间约1-2分钟，耐心等待，直到左侧项目目录结构显示完整，无报错（红色波浪线）。

步骤2：配置三方库依赖

我们需要在项目中引入4个鸿蒙化库，配置文件为“pubspec.yaml”，该文件是Flutter项目管理三方库的核心，缩进格式严格（必须用2个空格缩进，不能用Tab键），严格按照以下步骤操作：

操作步骤：

1. 在左侧项目目录中，找到项目根目录下的“pubspec.yaml”文件，双击打开；

2. 找到文件中的“dependencies”节点（用于配置生产环境依赖），在“flutter: sdk: flutter”下方，添加4个鸿蒙化库的依赖，完整配置如下（直接复制替换即可，注意缩进对齐）：

dependencies:

flutter:

sdk: flutter

# 鸿蒙官方适配版：本地存储，实现数据持久化

shared_preferences: ^2.2.2

# 鸿蒙适配版：状态管理，统一管理待办数据

provider: ^6.1.1

# 鸿蒙适配版：下拉刷新，实现列表刷新功能

pull_to_refresh: ^2.0.0

# 鸿蒙适配版：侧滑删除，实现列表项侧滑删除

flutter_slidable: ^3.0.0

3. 配置完成后，点击“pubspec.yaml”文件右上角的“Pub get”按钮（绿色箭头图标），IDE会自动下载这4个三方库依赖；

4. 等待下载完成，查看底部控制台，若显示“Process finished with exit code 0”，说明依赖下载成功；若出现报错，大概率是以下两种情况：

• 缩进错误：检查依赖的缩进是否与“flutter: sdk: flutter”对齐，必须用2个空格缩进；

• 版本不兼容：直接使用上述指定的版本，不要修改，重新点击“Pub get”即可；若仍报错，删除项目根目录下的“pubspec.lock”文件，再重新点击“Pub get”。

步骤3：编写核心代码

本次案例需要创建3个核心文件，分别是：模型文件（todo_model.dart）、状态管理文件（todo_provider.dart）、主页面文件（main.dart），我们逐文件编写，每段代码都添加详细注释，同时讲解核心逻辑，让新手不仅能复制，还能看懂。

3.1 第一步：创建模型文件（todo_model.dart）—— 封装待办数据（进阶重点）

为什么需要模型文件？因为我们的待办事项包含“标题”和“完成状态”两个属性，用模型封装后，数据管理更规范，后续存储、展示也更方便，这是企业级开发的基础操作，也是本次案例的进阶点之一。

操作步骤：

1. 在左侧项目目录中，找到“lib”文件夹，右键点击“lib”→“New→Dart File”，文件名填写“todo_model.dart”，点击“OK”；

2. 打开“todo_model.dart”文件，复制以下代码，逐段解析代码作用：

// 待办事项模型类，封装待办的两个核心属性：标题（title）、完成状态（isDone）

class TodoModel {

// 待办标题（必须填写，非空）

final String title;

// 完成状态（默认未完成，false）

bool isDone;



// 构造函数：创建待办对象时，必须传入标题，完成状态可选（默认未完成）

TodoModel({

required this.title, // required表示必须传入

this.isDone = false, // 可选参数，默认值为false（未完成）

});



// 把TodoModel对象转换成Map（用于本地存储，因为shared_preferences不能直接存储对象）

Map<String, dynamic> toJson() {

return {

'title': title, // 存储标题

'isDone': isDone, // 存储完成状态

};

}



// 把Map转换成TodoModel对象（用于从本地存储中读取数据，还原成我们需要的待办对象）

factory TodoModel.fromJson(Map<String, dynamic> json) {

return TodoModel(

title: json['title'], // 从Map中读取标题

isDone: json['isDone'], // 从Map中读取完成状态

);

}

}

核心解析：

• 这个类的作用，就是“规范待办数据的格式”，每个待办事项都是一个TodoModel对象，包含title（标题）和isDone（完成状态）；

• toJson()方法：将待办对象转换成Map格式，因为本地存储库（shared_preferences）只能存储字符串、列表等基础类型，不能直接存储对象，所以需要转换后再存储；

• fromJson()方法：从本地存储中读取到Map格式的数据后，转换成TodoModel对象，方便我们在页面上展示和操作。

3.2 第二步：创建状态管理文件（todo_provider.dart）—— 管理待办数据（进阶核心）

为什么需要状态管理？如果没有状态管理，我们的待办数据（列表）只能在一个组件中使用，组件之间无法共享数据，操作起来很繁琐（比如添加待办后，列表无法实时更新）。Provider是鸿蒙适配的状态管理库，能统一管理所有待办数据，实现组件间数据共享，让代码更简洁、易维护。

操作步骤：

1. 右键点击“lib”文件夹→“New→Dart File”，文件名填写“todo_provider.dart”，点击“OK”；

2. 打开“todo_provider.dart”文件，复制以下代码，逐段解析：

// 导入必要的包：状态管理包、本地存储包、我们自己写的模型包

import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';

import 'todo_model.dart';

import 'dart:convert'; // 用于JSON格式转换（Map和字符串之间转换）



// 状态管理类，继承ChangeNotifier（Provider的核心类，用于通知组件数据变化）

class TodoProvider extends ChangeNotifier {

// 待办列表，存储所有待办事项（私有变量，只能在当前类中修改）

List<TodoModel> _todoList = [];

// 提供对外的访问方式（只读，外部只能读取，不能直接修改）

List<TodoModel> get todoList => _todoList;



// 本地存储实例（用于操作本地存储）

late SharedPreferences prefs;



// 初始化本地存储，同时加载本地已存储的待办数据

Future<void> initPrefs() async {

prefs = await SharedPreferences.getInstance(); // 获取本地存储实例

loadTodoList(); // 加载本地待办数据

}



// 加载本地待办数据（从本地存储中读取，还原成TodoModel列表）

void loadTodoList() {

// 从本地存储中读取字符串列表（存储的是转换后的JSON字符串）

List<String>? stringList = prefs.getStringList('todo_list');

if (stringList != null) {

// 将字符串列表转换成TodoModel列表（逐一遍历，调用fromJson方法）

_todoList = stringList.map((e) => TodoModel.fromJson(jsonDecode(e))).toList();

}

notifyListeners(); // 通知所有依赖该数据的组件，数据已更新（刷新页面）

}



// 新增待办事项（对外提供的方法，外部组件可调用该方法添加待办）

Future<void> addTodo(TodoModel todo) async {

_todoList.add(todo); // 将新的待办对象添加到列表

await _saveToLocal(); // 同步保存到本地存储

notifyListeners(); // 通知组件更新，页面实时显示新的待办

}



// 切换待办完成状态（对外提供的方法，用于勾选/取消勾选待办）

Future<void> toggleStatus(int index) async {

// 取反完成状态（true变false，false变true）

_todoList[index].isDone = !_todoList[index].isDone;

await _saveToLocal(); // 同步保存到本地存储

notifyListeners(); // 通知组件更新，页面实时显示状态变化

}



// 删除待办事项（对外提供的方法，用于侧滑删除）

Future<void> deleteTodo(int index) async {

_todoList.removeAt(index); // 删除列表中指定位置的待办

await _saveToLocal(); // 同步保存到本地存储

notifyListeners(); // 通知组件更新，页面实时删除该待办

}



// 私有方法：将待办列表保存到本地存储（内部使用，不对外暴露）

Future<void> _saveToLocal() async {

// 将TodoModel列表转换成字符串列表（逐一遍历，调用toJson方法，再转换成JSON字符串）

List<String> stringList = _todoList.map((e) => jsonEncode(e.toJson())).toList();

// 将字符串列表保存到本地存储，key为"todo_list"（后续读取时用这个key）

await prefs.setStringList('todo_list', stringList);

}

}

核心解析（新手重点看）：

• TodoProvider继承ChangeNotifier：这是Provider的核心，只要调用notifyListeners()方法，所有使用该状态的组件都会收到通知，自动刷新页面，实现“数据变化→页面更新”的联动；

• 核心方法作用：

① initPrefs()：初始化本地存储，启动APP时自动调用，加载之前存储的待办数据；

② loadTodoList()：从本地存储读取数据，还原成待办列表，供页面展示；

③ addTodo()：新增待办，调用后会将新待办添加到列表、保存到本地、刷新页面；

④ toggleStatus()：切换待办完成状态，勾选复选框时调用，同步更新本地存储和页面；

⑤ deleteTodo()：删除待办，侧滑删除时调用，同步删除本地存储和页面中的数据；

⑥ _saveToLocal()：私有方法，负责将待办列表转换成可存储的格式，保存到本地，避免重复编写存储逻辑。

3.3 第三步：编写主页面文件（main.dart）—— 界面与交互（核心展示）

main.dart是Flutter项目的入口文件，负责搭建APP的界面（输入框、列表、按钮），实现交互逻辑（点击添加、勾选状态、下拉刷新、侧滑删除），所有功能最终都在这里展示和实现，代码较长，但每段都有详细注释，逐段解析。

操作步骤：

1. 在左侧项目目录中，找到“lib”文件夹下的“main.dart”文件（默认存在），双击打开；

2. 删除文件中的默认代码，复制以下代码，逐段解析：

// 导入必要的包：Flutter基础包、状态管理包、下拉刷新包、侧滑删除包、我们自己写的模型和状态管理包

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'package:flutter_slidable/flutter_slidable.dart';

import 'todo_model.dart';

import 'todo_provider.dart';



// APP入口函数，启动APP

void main() async {

// 确保Flutter组件初始化完成（必须添加，否则本地存储初始化会报错）

WidgetsFlutterBinding.ensureInitialized();

runApp(

// 提供状态管理，让整个APP都能访问TodoProvider中的数据

ChangeNotifierProvider(

// 创建TodoProvider实例，并调用initPrefs()初始化本地存储、加载数据

create: (ctx) => TodoProvider()..initPrefs(),

child: const MyApp(), // APP根组件

),

);

}



// APP根组件（无状态组件，只负责搭建基础结构）

class MyApp extends StatelessWidget {

const MyApp({super.key});



@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter+鸿蒙 TODO进阶实战', // APP标题（显示在模拟器顶部）

theme: ThemeData(primarySwatch: Colors.blue), // APP主题色（蓝色）

home: const TodoPage(), // APP主页面（待办清单页面）

);

}

}



// 待办清单主页面（有状态组件，负责界面展示和交互）

class TodoPage extends StatefulWidget {

const TodoPage({super.key});



@override

State<TodoPage> createState() => _TodoPageState();

}



class _TodoPageState extends State<TodoPage> {

// 文本控制器，用于获取输入框中的文字（新增待办时使用）

final TextEditingController _controller = TextEditingController();

// 下拉刷新控制器，用于控制下拉刷新的状态（开始、结束刷新）

final RefreshController _refreshController = RefreshController();



@override

Widget build(BuildContext context) {

// 构建页面布局，Scaffold是Flutter的基础页面容器（包含标题栏、主体内容）

return Scaffold(

// 标题栏（顶部导航栏）

appBar: AppBar(

title: const Text("Flutter+鸿蒙 TODO待办清单（进阶版）"), // 标题栏文字

),

// 页面主体内容（垂直布局：输入框区域 + 下拉刷新列表区域）

body: Column(

children: [

// 1. 输入框区域（固定在顶部，用于新增待办）

Padding(

padding: const EdgeInsets.all(16.0), // 内边距，让输入框不贴边

child: Row(

children: [

// 输入框（占满大部分宽度，Expanded表示自适应剩余宽度）

Expanded(

child: TextField(

controller: _controller, // 绑定文本控制器，获取输入内容

decoration: const InputDecoration(

hintText: "输入待办事项（如：学习Flutter+鸿蒙开发）", // 提示文字

border: OutlineInputBorder(), // 输入框边框

),

),

),

const SizedBox(width: 10), // 输入框和按钮之间的间距

// 新增待办按钮

ElevatedButton(

onPressed: () {

// 1. 获取输入框内容，去除前后空格（避免输入空内容）

String text = _controller.text.trim();

// 2. 判断输入内容是否为空，不为空则新增待办

if (text.isNotEmpty) {

// 创建待办对象（标题为输入的文字，默认未完成）

final todo = TodoModel(title: text);

// 调用状态管理中的addTodo方法，新增待办（listen: false表示不监听数据变化，只调用方法）

Provider.of<TodoProvider>(context, listen: false).addTodo(todo);

// 清空输入框，方便下次输入

_controller.clear();

}

},

child: const Text("添加"), // 按钮文字

),

],

),

),

// 2. 下拉刷新列表区域（占满剩余高度，用于展示所有待办）

Expanded(

child: Consumer<TodoProvider>(

// Consumer：监听状态管理中的数据变化，数据变化时自动刷新该组件

builder: (context, provider, child) {

// 下拉刷新组件（SmartRefresher是pull_to_refresh库的核心组件）

return SmartRefresher(

controller: _refreshController, // 绑定下拉刷新控制器

onRefresh: () {

// 下拉刷新时，调用状态管理的loadTodoList方法，重新加载数据

provider.loadTodoList();

// 结束刷新动画（必须调用，否则刷新动画会一直显示）

_refreshController.refreshCompleted();

},

header: const WaterDropHeader(), // 刷新头部样式（默认水滴样式，无需修改）

// 列表组件（ListView.builder用于展示大量列表数据，按需加载，性能更好）

child: ListView.builder(

itemCount: provider.todoList.length, // 列表长度 = 待办列表的数量

// 构建每一个列表项（每一条待办事项）

itemBuilder: (context, index) {

// 获取当前索引对应的待办对象

final todo = provider.todoList[index];

// 侧滑删除组件（flutter_slidable库的核心组件）

return Slidable(

// 侧滑方向：从右向左滑动

direction: Axis.horizontal,

// 侧滑右侧的操作按钮（删除按钮）

endActionPane: ActionPane(

motion: const ScrollMotion(), // 侧滑动画效果（默认）

children: [

SlidableAction(

onPressed: (ctx) {

// 点击删除按钮，调用状态管理的deleteTodo方法，删除当前索引的待办

provider.deleteTodo(index);

},

backgroundColor: Colors.red, // 按钮背景色（红色，醒目）

foregroundColor: Colors.white, // 按钮文字、图标颜色（白色）

icon: Icons.delete, // 按钮图标（删除图标）

label: "删除", // 按钮文字

),

],

),

// 列表项内容（每一条待办的展示样式）

child: ListTile(

// 复选框（用于切换待办完成状态）

leading: Checkbox(

value: todo.isDone, // 复选框状态 = 待办的完成状态

onChanged: (v) {

// 点击复选框，调用状态管理的toggleStatus方法，切换完成状态

provider.toggleStatus(index);

},

),

// 待办标题（已完成的待办，文字添加删除线）

title: Text(

todo.title,

style: TextStyle(

decoration: todo.isDone

? TextDecoration.lineThrough // 已完成：文字划线

: null, // 未完成：无划线

),

),

// 待办状态提示（已完成/未完成）

subtitle: Text(todo.isDone ? "已完成" : "未完成"),

),

);

},

),

);

},

),

),

],

),

);

}

}

核心解析（新手重点理解）：

• 入口函数main()：添加了WidgetsFlutterBinding.ensureInitialized()，确保Flutter组件初始化完成，否则本地存储初始化会报错；同时通过ChangeNotifierProvider，让整个APP都能访问TodoProvider中的数据；

• 输入框区域：由TextField（输入框）和ElevatedButton（添加按钮）组成，点击按钮时，获取输入内容，调用addTodo()方法新增待办，清空输入框；

• 下拉刷新区域：使用SmartRefresher组件，下拉时调用loadTodoList()方法重新加载数据，结束后调用refreshCompleted()关闭刷新动画；

• 列表展示：使用ListView.builder按需加载列表项，每一个列表项都是Slidable组件（支持侧滑删除），内部包含Checkbox（切换完成状态）和Text（展示待办标题和状态）；

• 交互逻辑联动：所有操作（添加、删除、切换状态）都调用状态管理中的方法，方法执行后会通知组件刷新，实现“操作→数据变化→页面更新”的无缝联动，这就是状态管理的核心作用。

步骤4：运行到鸿蒙模拟器（测试所有功能，验证效果）

代码编写完成后，我们将项目运行到鸿蒙NEXT模拟器上，测试所有核心功能，确保每一个操作都能正常运行，步骤如下：

1. 确保鸿蒙NEXT模拟器已启动（若未启动，打开DevEco Studio，点击“Tools→Device Manager”，找到创建的模拟器，点击“Start”启动）；

2. 在DevEco Studio中，点击顶部工具栏的“运行”按钮（绿色三角形图标），或使用快捷键“Shift+F10”；

3. 弹出运行配置窗口，默认选择当前项目“flutter_harmony_todo”，运行设备选择已启动的鸿蒙NEXT模拟器，点击“OK”；

4. 开始编译运行，首次运行需编译鸿蒙应用包，时间较长（1-3分钟），控制台会显示编译进度，耐心等待；若编译失败，重点检查以下3点：

• 项目类型是否为“Flutter HarmonyOS Project”；

• 鸿蒙SDK API 20是否安装成功；

• 4个三方库是否下载成功（无报错）。

5. 运行成功后，鸿蒙模拟器会自动打开APP，依次测试以下所有核心功能（确保全部正常）：

① 新增待办：在输入框中输入任意内容（如“学习Provider状态管理”），点击“添加”，列表中会新增一条待办，输入框清空；

② 切换完成状态：点击列表项左侧的复选框，待办标题会自动添加删除线，subtitle显示“已完成”；再次点击，删除线消失，subtitle显示“未完成”；

③ 下拉刷新：在列表区域向下拉动，会出现水滴状刷新动画，松开后刷新完成，列表显示最新的待办数据（若添加/删除/切换状态，刷新后同步）；

④ 侧滑删除：长按列表中的任意一条待办，从右向左滑动，会出现红色“删除”按钮，点击删除，该待办会从列表中消失，本地存储也会同步删除；

⑤ 数据持久化：关闭APP（点击模拟器底部的“返回”按钮，退出APP），再重新打开APP，之前添加的待办数据不会丢失，状态也会