主题切换应用

---

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

适配的第三方库地址：

• shared_preferences: https://pub.dev/packages/shared_preferences
• animations: https://pub.dev/packages/animations
• quick_actions: https://pub.dev/packages/quick_actions
• google_fonts: https://pub.dev/packages/google_fonts

一、项目概述

运行效果图

1.1 应用简介

主题切换应用是一款专业的界面主题管理工具，帮助用户轻松管理和切换应用的主题风格。通过丰富的预设主题和强大的自定义功能，用户可以根据个人喜好打造独特的视觉体验。应用支持亮色、暗色、跟随系统等多种主题模式，以及多种颜色主题预设，让界面焕然一新。

应用以多彩的色调为主题，象征个性与创意。涵盖主题管理、自定义主题、主题预览、已保存主题四大核心模块。用户可以快速切换预设主题、自定义主题颜色、预览主题效果、保存常用主题配置。

1.2 核心功能

功能模块	功能描述	实现方式
主题切换	快速切换不同主题	状态管理
预设主题	多种颜色主题预设	枚举定义
自定义主题	自定义主色调和亮度	颜色选择器
主题预览	实时预览主题效果	组件展示
主题保存	保存自定义主题配置	本地存储
明暗切换	快速切换明暗模式	主题模式
颜色选择	丰富的颜色调色板	颜色组件
主题编辑	编辑已保存的主题	表单编辑

1.3 预设主题定义

序号	主题名称	Emoji	图标	种子颜色	亮度
1	跟随系统	🔄	brightness_auto	蓝色	跟随系统
2	亮色主题	☀️	light_mode	琥珀色	亮色
3	暗色主题	🌙	dark_mode	靛蓝色	暗色
4	海洋主题	🌊	water_drop	青色	亮色
5	森林主题	🌲	forest	绿色	亮色
6	日落主题	🌅	wb_sunny	橙色	亮色
7	薰衣草主题	💜	local_florist	紫色	亮色
8	玫瑰主题	🌹	favorite	粉色	亮色
9	自定义主题	🎨	palette	自定义	可选

1.4 页面模块定义

序号	页面名称	Emoji	描述	主要功能
1	主题页	🎨	主题选择与切换	预设主题、快速切换
2	自定义页	🔧	自定义主题配置	颜色选择、亮度调整
3	预览页	👁️	主题效果预览	组件展示、样式预览
4	已保存页	💾	已保存主题管理	主题列表、编辑删除

1.5 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	StatefulWidget	-
数据存储	SharedPreferences	>= 2.0.0
动画效果	AnimationController	-
目标平台	鸿蒙OS / Web	API 21+

1.6 项目结构

lib/
└── main_theme_switcher.dart
    ├── ThemeSwitcherApp                 # 应用入口（状态管理）
    ├── AppTheme                         # 预设主题枚举
    ├── CustomTheme                      # 自定义主题模型
    ├── ThemeSwitcherHomePage            # 主页面（底部导航）
    ├── _buildThemePage                  # 主题选择页
    ├── _buildCustomizePage              # 自定义主题页
    ├── _buildPreviewPage                # 主题预览页
    ├── _buildSavedThemesPage            # 已保存主题页
    ├── _buildColorPalette               # 颜色调色板
    └── _buildThemeCard                  # 主题卡片组件

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 主题切换流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 预设主题枚举 (AppTheme)

enum AppTheme {
  system('跟随系统', Icons.brightness_auto, Colors.blue, Brightness.light),
  light('亮色主题', Icons.light_mode, Colors.amber, Brightness.light),
  dark('暗色主题', Icons.dark_mode, Colors.indigo, Brightness.dark),
  ocean('海洋主题', Icons.water_drop, Colors.cyan, Brightness.light),
  forest('森林主题', Icons.forest, Colors.green, Brightness.light),
  sunset('日落主题', Icons.wb_sunny, Colors.orange, Brightness.light),
  lavender('薰衣草主题', Icons.local_florist, Colors.purple, Brightness.light),
  rose('玫瑰主题', Icons.favorite, Colors.pink, Brightness.light),
  custom('自定义主题', Icons.palette, Colors.blue, Brightness.light);

  final String label;
  final IconData icon;
  final Color seedColor;
  final Brightness brightness;
  const AppTheme(this.label, this.icon, this.seedColor, this.brightness);
}

3.1.2 自定义主题模型 (CustomTheme)

class CustomTheme {
  final String id;
  final String name;
  final Color primaryColor;
  final Color secondaryColor;
  final Brightness brightness;
  final DateTime createdAt;

  const CustomTheme({
    required this.id,
    required this.name,
    required this.primaryColor,
    required this.secondaryColor,
    required this.brightness,
    required this.createdAt,
  });

  CustomTheme copyWith({
    String? name,
    Color? primaryColor,
    Color? secondaryColor,
    Brightness? brightness,
  }) {
    return CustomTheme(
      id: id,
      name: name ?? this.name,
      primaryColor: primaryColor ?? this.primaryColor,
      secondaryColor: secondaryColor ?? this.secondaryColor,
      brightness: brightness ?? this.brightness,
      createdAt: createdAt,
    );
  }
}

3.1.3 主题使用分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 主题页结构

3.2.3 自定义页结构

3.2.4 预览页结构

3.3 主题切换逻辑

3.4 颜色选择逻辑

---

四、鸿蒙Flutter适配说明

4.1 适配要点

适配项	说明	处理方式
主题系统	Material Design 3 主题	使用colorSchemeSeed
状态管理	全局主题状态	StatefulWidget + InheritedWidget
动画效果	主题切换动画	AnimatedContainer
数据持久化	主题设置保存	SharedPreferences
系统主题	跟随系统主题	ThemeMode.system

4.2 第三方库替代方案

原库	功能	鸿蒙替代方案
shared_preferences	设置存储	鸿蒙Preferences
animations	动画效果	AnimationController
quick_actions	快捷方式	鸿蒙ShortcutManager
google_fonts	字体加载	鸿蒙FontLoader

4.3 性能优化建议

---

五、开发计划

5.1 开发周期

5.2 功能清单

序号	功能模块	优先级	状态
1	预设主题枚举	高	✅ 已完成
2	自定义主题模型	高	✅ 已完成
3	主题页布局	高	✅ 已完成
4	自定义页布局	高	✅ 已完成
5	预览页布局	中	✅ 已完成
6	已保存页布局	中	✅ 已完成
7	主题切换功能	高	✅ 已完成
8	颜色选择器	高	✅ 已完成
9	亮度切换	中	✅ 已完成
10	主题保存	中	✅ 已完成
11	主题编辑	低	✅ 已完成
12	主题删除	低	✅ 已完成

---

六、使用说明

6.1 运行方式

# 进入项目目录
cd flutter_harmonyos

# 运行应用
flutter run -d harmonyos lib/main_theme_switcher.dart

# 或指定设备运行
flutter run -d <device_id> lib/main_theme_switcher.dart

6.2 操作说明

操作	说明
切换预设主题	在主题页点击主题卡片
快速切换明暗	在主题页使用快速切换开关
自定义颜色	在自定义页点击调色板颜色
调整亮度	在自定义页选择亮色/暗色
应用自定义主题	点击"应用自定义主题"按钮
保存主题	应用主题后点击保存按钮
查看已保存	切换到已保存页查看列表
编辑主题	点击主题卡片菜单选择编辑
删除主题	点击主题卡片菜单选择删除

6.3 注意事项

1. 本应用使用模拟数据演示功能
2. 实际项目中需接入SharedPreferences持久化存储
3. 自定义主题的颜色会影响整体应用色调
4. 建议在鸿蒙设备上进行真机测试

---

七、总结

主题切换应用通过直观的界面设计和流畅的交互体验，为用户提供了便捷的主题管理工具。应用支持丰富的预设主题和灵活的自定义功能，满足不同用户的个性化需求。Material Design 3 的设计规范确保了界面的一致性和美观性。

通过鸿蒙Flutter的跨平台能力，该应用可以轻松适配鸿蒙OS和其他平台，为用户提供一致的使用体验。后续可以进一步扩展主题同步、社区分享、动态主题等功能，打造更加完善的主题管理解决方案。