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

【flutter for open harmony】第三方库Flutter 鸿蒙版心情日记实战指南（适配 1.0.0）✨

news 2026/5/16 4:13:59

【Flutter for OpenHarmony】鸿蒙版心情日记实战指南（适配OpenHarmony 1.0.0）

Flutter实战：开源鸿蒙睡眠记录组件
Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

摘要

本文基于Flutter for OpenHarmony生态，从零实现一款鸿蒙平台专属的心情日记应用，完整覆盖心情选择、文字记录、本地存储、历史查看、时间戳核心功能，同时详解cached_network_image第三方库的鸿蒙化适配方案，提供可直接运行的完整代码，助力开发者快速掌握Flutter跨平台开发鸿蒙应用的核心流程。

一、前言

在OpenHarmony（开源鸿蒙）生态快速发展的背景下，Flutter作为主流跨平台框架，已实现对鸿蒙系统的完整适配。心情记录是轻量化工具类应用的典型场景，兼具学习价值与实用价值。

本文将以心情日记为实战案例，从环境搭建、界面实现、功能开发、三方库适配全流程讲解，最终产出可直接部署到鸿蒙设备的完整应用。

二、核心功能与效果展示

2.1 功能特性

功能模块	详细描述
心情表情选择	5种常用情绪表情（悲伤/烦躁/平静/开心/狂喜）一键切换
心情文本记录	支持多行文本输入，记录当日心情详情
自动时间戳	记录保存时自动绑定当前日期+时间
本地持久化	数据本地存储，重启应用不丢失
历史记录查看	列表展示所有历史心情，支持回溯查看

2.2 界面效果

主界面：大尺寸当前心情表情+底部表情切换栏+文本输入框
保存功能：一键保存当前记录，自动追加到历史列表
历史页：时间倒序展示所有心情记录，清晰直观

三、开发环境准备

3.1 基础环境

Flutter SDK：≥3.10.0
OpenHarmony SDK：1.0.0
开发工具：Android Studio / VS Code
目标设备：鸿蒙模拟器/真机

3.2 核心依赖

在pubspec.yaml添加本地存储依赖（鸿蒙适配版）：

dependencies:flutter:sdk:fluttershared_preferences:^2.2.2# 本地存储（鸿蒙兼容）cached_network_image:^3.3.0# 网络图片库（本文适配鸿蒙）

执行依赖安装：

flutter pub get

四、完整代码实现

4.1 主页面完整代码（含存储+历史功能）

import'package:flutter/material.dart';import'package:shared_preferences/shared_preferences.dart';import'dart:convert';// 心情记录模型classMoodRecord{finalStringemoji;finalStringnote;finalStringtime;MoodRecord({requiredthis.emoji,requiredthis.note,requiredthis.time,});// 转JSONMap<String,String>toJson()=>{'emoji':emoji,'note':note,'time':time,};// 从JSON解析staticMoodRecordfromJson(Map<String,dynamic>json)=>MoodRecord(emoji:json['emoji'],note:json['note'],time:json['time'],);}classMoodDiaryPageextendsStatefulWidget{constMoodDiaryPage({super.key});@overrideState<MoodDiaryPage>createState()=>_MoodDiaryPageState();}class_MoodDiaryPageStateextendsState<MoodDiaryPage>{// 当前选中心情String_selectedMood='😊';// 输入控制器finalTextEditingController_noteController=TextEditingController();// 心情表情列表finalList<String>_moodEmojis=['😢','😕','😐','😊','😄'];// 历史记录List<MoodRecord>_historyRecords=[];@overridevoidinitState(){super.initState();// 初始化加载历史记录_loadHistory();}// 加载本地历史记录Future<void>_loadHistory()async{finalprefs=awaitSharedPreferences.getInstance();finalString?recordsJson=prefs.getString('mood_records');if(recordsJson!=null){finalList<dynamic>jsonList=jsonDecode(recordsJson);setState((){_historyRecords=jsonList.map((e)=>MoodRecord.fromJson(e)).toList();});}}// 保存心情记录Future<void>_saveMood()async{if(_noteController.text.trim().isEmpty){ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('请输入心情内容~')),);return;}// 创建记录finalnewRecord=MoodRecord(emoji:_selectedMood,note:_noteController.text.trim(),time:DateTime.now().toString().substring(0,19),);// 追加并存储setState((){_historyRecords.insert(0,newRecord);});finalprefs=awaitSharedPreferences.getInstance();awaitprefs.setString('mood_records',jsonEncode(_historyRecords.map((e)=>e.toJson()).toList()),);// 清空输入框_noteController.clear();ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('心情保存成功！')),);}@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('鸿蒙心情日记'),centerTitle:true,),body:SingleChildScrollView(padding:constEdgeInsets.all(16),child:Column(children:[// 当前选中心情Text(_selectedMood,style:constTextStyle(fontSize:100),),constSizedBox(height:20),// 心情选择栏Row(mainAxisAlignment:MainAxisAlignment.spaceEvenly,children:_moodEmojis.map((emoji)=>GestureDetector(onTap:()=>setState(()=>_selectedMood=emoji),child:Text(emoji,style:TextStyle(fontSize:36,color:_selectedMood==emoji?Colors.blue:Colors.grey,),),),).toList(),),constSizedBox(height:30),// 心情输入框TextField(controller:_noteController,maxLines:5,decoration:constInputDecoration(hintText:'记录今天的心情...',border:OutlineInputBorder(),),),constSizedBox(height:20),// 保存按钮SizedBox(width:double.infinity,child:ElevatedButton(onPressed:_saveMood,style:ElevatedButton.styleFrom(padding:constEdgeInsets.symmetric(vertical:14),),child:constText('保存心情',style:TextStyle(fontSize:16),),),),constSizedBox(height:30),// 历史记录标题constText('历史心情记录',style:TextStyle(fontSize:18,fontWeight:FontWeight.bold),),constSizedBox(height:10),// 历史记录列表..._historyRecords.map((record){returnCard(margin:constEdgeInsets.only(bottom:8),child:Padding(padding:constEdgeInsets.all(12),child:Column(crossAxisAlignment:CrossAxisAlignment.start,children:[Row(children:[Text(record.emoji,style:constTextStyle(fontSize:24)),constSizedBox(width:10),Text(record.time),],),constSizedBox(height:6),Text(record.note),],),),);}),],),),);}}

4.2 入口文件配置

在main.dart注册页面：

import'package:flutter/material.dart';import'mood_diary_page.dart';voidmain(){runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'鸿蒙心情日记',theme:ThemeData(primarySwatch:Colors.blue),home:constMoodDiaryPage(),);}}

五、cached_network_image 鸿蒙化适配指南

cached_network_image是Flutter常用网络图片缓存库，鸿蒙平台适配步骤：

确保依赖版本：cached_network_image: ^3.3.0
鸿蒙平台无需额外修改原生代码，Flutter层直接调用即可：

CachedNetworkImage(imageUrl:'https://xxx.png',placeholder:(context,url)=>constCircularProgressIndicator(),errorWidget:(context,url,error)=>constIcon(Icons.error),)