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

Flutter 鸿蒙跨端开发实战：集成三方库实现鸿蒙设备 TODO 清单应用

news 2026/4/27 4:52:18

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

本文专为鸿蒙入门开发者打造，以可直接运行的 TODO 清单项目为实战案例，手把手教你用 Flutter 跨端框架开发鸿蒙应用，全程包含Flutter 核心配置、三方库集成、鸿蒙真机 / 模拟器调试，零基础也能跟着实现完整功能。

一、项目核心说明

技术栈：Flutter（跨端框架）+ 鸿蒙 OpenHarmony（目标平台）+ 实用三方库

项目功能：待办事项添加、标记完成、删除、本地持久化存储

必用三方库：

shared_preferences：本地数据持久化（保存 TODO 数据，重启不丢失）
fluttertoast：轻量级提示弹窗（操作反馈）

适配目标：鸿蒙手机 / 平板 / 模拟器全兼容

二、前置环境准备（新手必看）

1. 基础环境安装

安装 Flutter SDK（≥3.19.0，推荐稳定版）
安装 DevEco Studio（鸿蒙官方 IDE，用于运行模拟器 / 真机）
配置 Flutter 鸿蒙编译环境：
终端执行：flutter config --enable-openharmony

2. 验证环境

终端输入：flutter devices，若显示鸿蒙设备 / 模拟器，说明环境配置成功。

三、创建 Flutter 鸿蒙项目

步骤 1：新建 Flutter 项目

终端执行命令，创建项目：

flutter create flutter_harmony_todocdflutter_harmony_todo

步骤 2：启用鸿蒙平台支持

项目根目录执行：

flutter create--platforms=openharmony.

执行后，项目会自动生成openharmony适配目录，完成鸿蒙基础配置。

四、集成三方库（核心步骤）

步骤 1：修改pubspec.yaml配置

打开项目根目录的pubspec.yaml文件，在dependencies节点下添加三方库：

dependencies:flutter:sdk:flutter# 本地持久化三方库（保存TODO数据）shared_preferences:^2.5.2# 提示弹窗三方库（操作反馈）fluttertoast:^8.2.12

步骤 2：安装三方库

终端执行命令，拉取依赖：

flutter pub get

等待依赖下载完成，无报错即集成成功。

五、完整项目代码实现（带详细注释）

替换项目lib/main.dart文件的全部代码，以下是可直接运行的完整代码：

import'package:flutter/material.dart';// 导入本地持久化三方库import'package:shared_preferences/shared_preferences.dart';// 导入提示弹窗三方库import'package:fluttertoast/fluttertoast.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'Flutter鸿蒙TODO清单',// 关闭调试标签debugShowCheckedModeBanner:false,theme:ThemeData(primarySwatch:Colors.blue),home:constTodoPage(),);}}// TODO主页面classTodoPageextendsStatefulWidget{constTodoPage({super.key});@overrideState<TodoPage>createState()=>_TodoPageState();}class_TodoPageStateextendsState<TodoPage>{// 输入框控制器：获取输入的待办内容finalTextEditingController_todoController=TextEditingController();// 待办数据列表：存储所有TODO项List<String>_todoList=[];// 已完成项标记列表：记录哪些TODO被勾选List<bool>_isCompletedList=[];@overridevoidinitState(){super.initState();// 页面初始化时，加载本地存储的TODO数据_loadTodoData();}// ------------------- 核心方法：本地数据操作（三方库使用） -------------------// 1. 从本地加载TODO数据（shared_preferences三方库）Future<void>_loadTodoData()async{// 获取本地存储实例finalprefs=awaitSharedPreferences.getInstance();// 读取本地存储的待办列表，无数据则返回空数组setState((){_todoList=prefs.getStringList('todoList')??[];_isCompletedList=prefs.getStringList('isCompletedList')?.map((e)=>e=='true').toList()??List.generate(_todoList.length,(index)=>false);});}// 2. 保存TODO数据到本地（shared_preferences三方库）Future<void>_saveTodoData()async{finalprefs=awaitSharedPreferences.getInstance();// 存储待办内容列表awaitprefs.setStringList('todoList',_todoList);// 存储完成状态列表awaitprefs.setStringList('isCompletedList',_isCompletedList.map((e)=>e.toString()).toList(),);}// ------------------- 业务功能方法 -------------------// 添加待办事项void_addTodo(){StringtodoContent=_todoController.text.trim();// 校验输入内容不能为空if(todoContent.isEmpty){Fluttertoast.showToast(msg:"请输入待办内容");return;}setState((){_todoList.add(todoContent);_isCompletedList.add(false);// 清空输入框_todoController.clear();});// 保存到本地_saveTodoData();Fluttertoast.showToast(msg:"添加成功");}// 切换待办完成状态void_toggleComplete(int index){setState((){_isCompletedList[index]=!_isCompletedList[index];});_saveTodoData();}// 删除待办事项void_deleteTodo(int index){setState((){_todoList.removeAt(index);_isCompletedList.removeAt(index);});_saveTodoData();Fluttertoast.showToast(msg:"删除成功");}// ------------------- UI页面布局 -------------------@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText("Flutter鸿蒙TODO清单"),),body:Padding(padding:constEdgeInsets.all(16.0),child:Column(children:[// 输入框 + 添加按钮Row(children:[Expanded(child:TextField(controller:_todoController,decoration:constInputDecoration(hintText:"请输入待办事项",border:OutlineInputBorder(),),),),constSizedBox(width:10),ElevatedButton(onPressed:_addTodo,child:constText("添加"),),],),constSizedBox(height:20),// 待办列表展示区域Expanded(child:_todoList.isEmpty?constCenter(child:Text("暂无待办事项，快去添加吧~")):ListView.builder(itemCount:_todoList.length,itemBuilder:(context,index){returnCard(margin:constEdgeInsets.only(bottom:8),child:ListTile(// 勾选框：标记完成状态leading:Checkbox(value:_isCompletedList[index],onChanged:(value)=>_toggleComplete(index),),// 待办内容：已完成则添加删除线title:Text(_todoList[index],style:TextStyle(decoration:_isCompletedList[index]?TextDecoration.lineThrough:TextDecoration.none,color:_isCompletedList[index]?Colors.grey:Colors.black,),),// 删除按钮trailing:IconButton(icon:constIcon(Icons.delete,color:Colors.red),onPressed:()=>_deleteTodo(index),),),);},),),],),),);}}