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

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

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

🚀 本期开发目标

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

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

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

List<NoteModel> sortNoteByTimeDesc(List<NoteModel> list){
  list.sort((a,b){
    DateTime timeA = DateTime.parse(a.time);
    DateTime timeB = DateTime.parse(b.time);
    return timeB.compareTo(timeA);
  });
  return list;
}

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

在加载数据处接入排序：

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

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

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

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

class AppConfigKey {
  static const String themeMode = "theme_mode";
  static const int lightMode = 0;
  static const int darkMode = 1;
}

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

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

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

static Future<void> saveThemeMode(int mode){
  await _prefs!.setInt(AppConfigKey.themeMode, mode);
}

static int getThemeMode(){
  return _prefs!.getInt(AppConfigKey.themeMode) ?? AppConfigKey.lightMode;
}

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

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

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

int currentTheme = AppConfigKey.lightMode;

@override
void initState() {
  super.initState();
  currentTheme = StorageUtil.getThemeMode();
}

void switchTheme(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风格，干净简约。

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

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

void clearAllNote() async {
  await StorageUtil.saveNoteList([]);
  Navigator.pop(context);
  loadNoteData();
}

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

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

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

Color getBgColor(){
  return currentTheme == AppConfigKey.darkMode 
      ? Color(0xFF121212) 
      : Color(0xFFF5F7FA);
}

Color getCardColor(){
  return currentTheme == AppConfigKey.darkMode 
      ? Color(0xFF1E1E1E) 
      : Colors.white;
}

Color getTextColor(){
  return currentTheme == AppConfigKey.darkMode 
      : Colors.white 
      : Colors.black87;
}

所有页面背景、笔记卡片、文字颜色统一调用这几个方法，一键全局换肤，不用逐个页面修改。

✅ DAY8 真机运行实测效果

1. 笔记自动按时间倒序排列，最新创建、编辑笔记始终置顶；
2. 成功搭建应用设置页面，布局样式贴合鸿蒙原生设计；
3. 支持浅色/深色模式一键切换，全局页面自动适配配色；
4. 主题选择本地持久化，关闭重启APP依旧保留上次设置；
5. 提供一键清空所有笔记功能，二次弹窗防误删，数据清理彻底；
6. 全局UI风格统一，深浅模式切换流畅无卡顿、无布局错乱；
7. 项目代码进一步规整，常量统一管理，冗余逻辑精简完毕。

🎯 DAY8 知识点总结 & DAY9预告

本节核心知识点

1. Flutter 日期时间比对排序、列表自定义排序实战技巧；
2. 应用深浅色主题设计、全局配色抽离封装方案；
3. 配置项本地持久化，开关状态永久记忆实现思路；
4. 鸿蒙风格设置页面分组卡片布局、ListTile组合用法；
5. 全局状态统一管控，一处切换、全站自动换肤架构思想。

下一节DAY9预告

DAY9我们将开发：

• 笔记桌面小组件适配OpenHarmony桌面常驻展示
• 应用图标、启动页美化定制
• 项目全流程BUG排查、机型适配兼容优化
• 编译打包鸿蒙安装包配置、签名基础配置
• 项目整体架构复盘、代码规范终极整理