【开源鸿蒙跨平台开发训练营】Flutter框架鸿蒙应用深色模式适配

为适应鸿蒙设备的深色模式，项目中加入多种风格模式的切换，增强用户体验

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

文章目录

• 功能实现 – 03：深色模式与外观切换
• • 一、目标与方案
  • 二、依赖变更
  • 三、实现说明
  • • 3.1 设置服务：主题模式持久化
    • 3.2 应用入口：主题绑定与启动加载
    • 3.3 设置页：外观选项与模式选择
    • 3.4 各页颜色适配主题
  • 四、设置说明
  • 五、修改了哪些文件？
  • 六、测试建议
  • • • 结束语

鸿蒙系统（HarmonyOS）支持深色模式（Dark Mode），而Flutter作为跨平台框架，需通过适配确保应用在鸿蒙设备上能无缝切换深色与浅色主题。

功能实现 – 03：深色模式与外观切换

一、目标与方案

• 目标：全应用适配深色模式，并在设置中提供外观切换（跟随系统 / 浅色 / 深色），选择结果持久化并在下次启动时生效。
• 方案：
  • 在 main.dart 中定义亮色、深色两套 ThemeData（Material 3 ColorScheme），通过 MaterialApp 的 theme、darkTheme、themeMode 驱动全局外观。
  • 使用 ValueNotifier<ThemeMode> 作为全局主题状态，与 SettingsService 持久化联动；设置页通过底部弹层选择模式并更新 Notifier，触发整应用重建。
  • 将各页中的硬编码颜色（如 Colors.grey[600]）替换为 Theme.of(context).colorScheme 中的语义色，使列表、设置、发现、消息、收藏等页面在深色模式下自动呈现合适对比度。

二、依赖变更

• 无新增依赖。沿用现有 shared_preferences（SettingsService）与 Flutter 内置 ThemeData / ThemeMode。

三、实现说明

3.1 设置服务：主题模式持久化

文件：lib/services/settings_service.dart

• 新增存储键：_keyThemeMode = 'settings_theme_mode'，取值：'light' / 'dark' / 'system'。
• 新增方法：
  • Future<ThemeMode> getThemeMode()：读取本地存储，默认 ThemeMode.system。
  • Future<void> setThemeMode(ThemeMode mode)：写入并持久化。

3.2 应用入口：主题绑定与启动加载

文件：lib/main.dart

• 启动流程：main() 改为 async，在 runApp 前调用 SettingsService().getThemeMode() 得到初始模式，并创建 appThemeModeNotifier = ValueNotifier<ThemeMode>(initialThemeMode)。
• 主题定义：
  • _lightTheme：ColorScheme.fromSeed(seedColor: Colors.deepPurple, brightness: Brightness.light)，浅色背景与对比色。
  • _darkTheme：ColorScheme.fromSeed(…, brightness: Brightness.dark)，深色表面色（如 #1C1B1F）与浅色前景。
• MaterialApp：使用 ValueListenableBuilder<ThemeMode> 包裹，根据 appThemeModeNotifier 的当前值设置 themeMode，并同时传入 theme、darkTheme，实现即时切换且与系统深色模式解耦（当选择「跟随系统」时，Flutter 会按系统 brightness 自动选用 light/dark 主题）。

3.3 设置页：外观选项与模式选择

文件：lib/pages/profile_page.dart

• 在「设置」二级页的 ListView 顶部增加 「外观」 入口：
  • 标题：外观；副标题：当前模式文案（跟随系统 / 浅色 / 深色），通过 ValueListenableBuilder<ThemeMode> 与 appThemeModeNotifier 同步更新。
  • 点击后弹出 底部弹层（showModalBottomSheet），内为三个 RadioListTile<ThemeMode>：跟随系统、浅色、深色。
• 选择某一项后关闭弹层，若与当前模式不同则：
  • 更新 appThemeModeNotifier.value；
  • 调用 SettingsService().setThemeMode(chosen) 持久化。
• 弹层内同样使用 ValueListenableBuilder<ThemeMode>，保证单选项与当前模式一致。

3.4 各页颜色适配主题

以下页面将原先的 Colors.grey[*]、固定黑白等替换为 Theme.of(context).colorScheme 的语义色，以便在深色模式下自动获得合适对比度：

未改动的部分（刻意保留）：

• 首页（home_page）、作品详情（work_detail_page） 中全屏图片浏览区域使用黑色背景与白色叠加文字/控件，属于内容展示设计，不随浅/深主题切换，以保持沉浸式看图体验。
• network_image_widget 等图片占位与叠加层仍使用深底浅字，与上述一致。

四、设置说明

五、修改了哪些文件？

六、测试建议

• 在设置中依次切换「跟随系统」「浅色」「深色」，确认各 Tab（首页、发现、消息、我的）及二级页（设置、隐私、收藏、历史、搜索列表等）背景与文字对比度正常。
• 切换为深色后杀进程再启动，确认仍为深色；同理验证浅色与跟随系统。
• 在系统设置中切换深色/浅色，仅当应用内为「跟随系统」时应用外观应随之变化。

结束语

感谢阅读本帖，如对贴中内容有意见和建议的，欢迎与我联系交流，也欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net