Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY8：笔记时间排序+深浅主题切换+设置页面搭建+全局风格统一优化-平芜编程栈

Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY8：笔记时间排序+深浅主题切换+设置页面搭建+全局风格统一优化

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

大家好，欢迎来到智能备忘录APP实战DAY8！
前面DAY1到DAY7已经完成：项目搭建、笔记增删改查、本地持久化、分类标签、关键词搜索、笔记收藏全套核心业务，基础功能已经完全商用可用。
今天DAY8重点做体验升级与系统适配，实现笔记按时间倒序排序、搭建应用设置页面、支持浅色/深色主题一键切换、主题状态本地持久化、全局UI风格统一规整、冗余代码精简优化。

🚀 本期开发目标

实现笔记按创建时间倒序排序，最新笔记永远置顶
新增全局主题状态管理，支持浅色模式、深色模式切换
主题配置本地持久化保存，重启APP记忆上次选择
搭建应用设置页面，布局适配鸿蒙简约设计风格
添加主题切换开关、清空所有笔记功能入口
全局适配深浅主题配色，页面背景、文字、卡片自动变色
精简项目冗余代码、统一常量管理，优化项目工程化规范

⏱️ 第一步：实现笔记时间倒序排序

封装时间排序工具方法，将笔记列表按日期从新到旧排列，保证最新创建、最新编辑的笔记始终在最顶部。

List<NoteModel>sortNoteByTimeDesc(List<NoteModel>list){list.sort((a,b){DateTimetimeA=DateTime.parse(a.time);DateTimetimeB=DateTime.parse(b.time);returntimeB.compareTo(timeA);});returnlist;}

利用DateTime时间对象比对，进行倒序排序，在读取本地缓存、新增笔记、编辑笔记后统一调用，列表顺序永远规整有序。

在加载数据处接入排序：

voidloadNoteData(){List<NoteModel>list=StorageUtil.getNoteList();sortNoteByTimeDesc(list);setState((){noteList=list;});filterNoteByTagAndSearch();}

每次加载数据自动排序，不用手动调整，用户体验更贴合日常备忘录使用习惯。

🎨 第二步：新增主题状态常量与本地存储Key

在全局配置文件中定义主题标识常量，统一管理Key名称，避免硬编码。

classAppConfigKey{staticconstStringthemeMode="theme_mode";staticconstint lightMode=0;staticconstint darkMode=1;}

用数字标识两种主题模式，方便本地存储读写、逻辑判断，扩展性强。

💾 第三步：主题状态本地持久化读写

扩展StorageUtil工具类，新增主题保存与读取方法，实现主题设置永久记忆。

staticFuture<void>saveThemeMode(int mode){await_prefs!.setInt(AppConfigKey.themeMode,mode);}staticintgetThemeMode(){return_prefs!.getInt(AppConfigKey.themeMode)??AppConfigKey.lightMode;}

默认浅色模式兜底，第一次打开APP自动使用浅色风格，切换后永久保存。

🌓 第四步：搭建全局主题切换状态管理

在首页顶层状态类中维护主题变量，控制全局页面配色样式。

int currentTheme=AppConfigKey.lightMode;@overridevoidinitState(){super.initState();currentTheme=StorageUtil.getThemeMode();}voidswitchTheme(int mode){setState((){currentTheme=mode;});StorageUtil.saveThemeMode(mode);}

页面初始化自动读取本地主题配置，切换后立即刷新UI并同步保存到本地。

📄 第五步：新建应用设置页面

在ui/page下新建setting_page.dart，采用鸿蒙简约布局：顶部导航栏、主题切换选项、清空数据选项、分组卡片式排版。

Scaffold(appBar:AppBar(title:Text("应用设置")),body:ListView(padding:EdgeInsets.all(15),children:[Container(padding:EdgeInsets.all(16),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(16),),child:Column(children:[ListTile(title:Text("深色模式"),trailing:Switch(value:currentTheme==AppConfigKey.darkMode,onChanged:(bool val){if(val){switchTheme(AppConfigKey.darkMode);}else{switchTheme(AppConfigKey.lightMode);}},),)],),)],),)

采用分组卡片、圆角留白设计，完全对标OpenHarmony系统设置页面UI风格，干净简约。

🗑️ 第六步：新增一键清空所有笔记功能

在设置页面增加清空入口，二次弹窗确认，防止误操作，清空后删除本地所有笔记并刷新首页。

voidclearAllNote()async{awaitStorageUtil.saveNoteList([]);Navigator.pop(context);loadNoteData();}

直接保存空列表覆盖原有数据，一键清空，同时自动刷新首页列表，数据彻底清空无残留。

🎭 第七步：全局适配深浅主题配色

根据currentTheme动态判断背景色、卡片色、文字色，实现全局自动换肤。

ColorgetBgColor(){returncurrentTheme==AppConfigKey.darkMode?Color(0xFF121212):Color(0xFFF5F7FA);}ColorgetCardColor(){returncurrentTheme==AppConfigKey.darkMode?Color(0xFF1E1E1E):Colors.white;}ColorgetTextColor(){returncurrentTheme==AppConfigKey.darkMode:Colors.white:Colors.black87;}