主题切换应用
欢迎加入开源鸿蒙跨平台社区：
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 整体架构图
Data Layer
Business Layer
Presentation Layer
主页面
ThemeSwitcherHomePage
主题页
自定义页
预览页
已保存页
基础主题
预设主题
快速切换
颜色选择
亮度调整
应用主题
按钮预览
卡片预览
输入框预览
主题列表
主题操作
主题管理器
ThemeManager
颜色选择器
ColorPicker
主题存储
ThemeStorage
AppTheme
预设主题
CustomTheme
自定义主题
ThemeData
Flutter主题
2.2 类图设计
uses
manages
accesses
ThemeSwitcherApp
-AppTheme _currentTheme
-Color _customSeedColor
-Brightness _brightness
+setTheme(AppTheme theme)
+setCustomColor(Color color)
+toggleBrightness()
+Widget build()
<<enumeration>>
AppTheme
+String label
+IconData icon
+Color seedColor
+Brightness brightness
+system()
+light()
+dark()
+ocean()
+forest()
+sunset()
+lavender()
+rose()
+custom()
CustomTheme
+String id
+String name
+Color primaryColor
+Color secondaryColor
+Brightness brightness
+DateTime createdAt
+copyWith()
ThemeSwitcherHomePage
-int _currentIndex
-List<CustomTheme> _customThemes
-Color _selectedColor
+applyCustomTheme()
+saveCustomTheme()
+applySavedTheme()
+deleteTheme()
2.3 页面导航流程
主题
自定义
预览
已保存
是
否
应用
编辑
删除
应用启动
主题页
底部导航
自定义页
预览页
已保存页
选择预设主题
应用主题
界面更新
选择颜色
调整亮度
应用自定义主题
保存主题?
保存到列表
查看已保存主题
操作选择
应用主题
编辑主题
删除主题
2.4 主题切换流程
Flutter框架 应用状态 主页面 用户 Flutter框架 应用状态 主页面 用户 选择主题 setTheme(theme) 更新_currentTheme 触发rebuild 构建新ThemeData 应用新主题 显示新界面 自定义颜色 setCustomColor(color) 更新_customSeedColor 触发rebuild 构建自定义ThemeData 应用自定义主题 显示自定义界面
三、核心模块设计
3.1 数据模型设计
3.1.1 预设主题枚举 (AppTheme)
dart
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)
dart
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 主题使用分布
35% 25% 20% 8% 7% 5% 主题使用分布示例 跟随系统 亮色主题 暗色主题 海洋主题 森林主题 自定义主题
3.2 页面结构设计
3.2.1 主页面布局
ThemeSwitcherHomePage
IndexedStack
主题页
自定义页
预览页
已保存页
NavigationBar
主题 Tab
自定义 Tab
预览 Tab
已保存 Tab
3.2.2 主题页结构
主题页
SliverAppBar
基础主题区
预设主题区
快速切换区
跟随系统
亮色主题
暗色主题
主题网格
海洋主题
森林主题
日落主题
薰衣草主题
玫瑰主题
明暗模式开关
3.2.3 自定义页结构
自定义页
SliverAppBar
颜色调色板
当前选择预览
亮度选择器
应用按钮
颜色网格
20种预设颜色
颜色预览块
RGB值显示
十六进制值
亮色选项
暗色选项
3.2.4 预览页结构
预览页
SliverAppBar
按钮样式预览
卡片样式预览
输入框样式预览
列表项样式预览
填充按钮
边框按钮
文字按钮
图标按钮
普通卡片
主题色卡片
用户名输入框
密码输入框
3.3 主题切换逻辑
预设主题
自定义主题
亮色
暗色
跟随系统
亮
暗
开始切换主题
主题类型
获取主题配置
获取自定义颜色
提取种子颜色
使用选中颜色
构建ThemeData
亮度模式
生成亮色主题
生成暗色主题
获取系统亮度
系统亮度
应用主题
触发界面重建
完成切换
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 性能优化建议
性能优化
主题缓存
动画优化
状态管理
缓存ThemeData
避免重复构建
预加载主题
使用AnimatedContainer
控制动画时长
避免过度动画
最小化重建范围
使用const组件
延迟加载
五、开发计划
5.1 开发周期
2024-01-01 2024-01-03 2024-01-05 2024-01-07 2024-01-09 2024-01-11 2024-01-13 2024-01-15 2024-01-17 项目初始化 数据模型设计 基础页面搭建 主题页开发 自定义页开发 预览页开发 已保存页开发 主题切换逻辑 颜色选择器 主题保存功能 动画效果 性能优化 测试与修复 基础框架 核心功能 交互功能 完善优化 主题切换应用开发计划
5.2 功能清单
| 序号 | 功能模块 | 优先级 | 状态 |
|---|---|---|---|
| 1 | 预设主题枚举 | 高 | ✅ 已完成 |
| 2 | 自定义主题模型 | 高 | ✅ 已完成 |
| 3 | 主题页布局 | 高 | ✅ 已完成 |
| 4 | 自定义页布局 | 高 | ✅ 已完成 |
| 5 | 预览页布局 | 中 | ✅ 已完成 |
| 6 | 已保存页布局 | 中 | ✅ 已完成 |
| 7 | 主题切换功能 | 高 | ✅ 已完成 |
| 8 | 颜色选择器 | 高 | ✅ 已完成 |
| 9 | 亮度切换 | 中 | ✅ 已完成 |
| 10 | 主题保存 | 中 | ✅ 已完成 |
| 11 | 主题编辑 | 低 | ✅ 已完成 |
| 12 | 主题删除 | 低 | ✅ 已完成 |
六、使用说明
6.1 运行方式
bash
# 进入项目目录
cd flutter_harmonyos
# 运行应用
flutter run -d harmonyos lib/main_theme_switcher.dart
# 或指定设备运行
flutter run -d <device_id> lib/main_theme_switcher.dart6.2 操作说明
| 操作 | 说明 |
|---|---|
| 切换预设主题 | 在主题页点击主题卡片 |
| 快速切换明暗 | 在主题页使用快速切换开关 |
| 自定义颜色 | 在自定义页点击调色板颜色 |
| 调整亮度 | 在自定义页选择亮色/暗色 |
| 应用自定义主题 | 点击"应用自定义主题"按钮 |
| 保存主题 | 应用主题后点击保存按钮 |
| 查看已保存 | 切换到已保存页查看列表 |
| 编辑主题 | 点击主题卡片菜单选择编辑 |
| 删除主题 | 点击主题卡片菜单选择删除 |
6.3 注意事项
- 本应用使用模拟数据演示功能
- 实际项目中需接入SharedPreferences持久化存储
- 自定义主题的颜色会影响整体应用色调
- 建议在鸿蒙设备上进行真机测试
七、总结
主题切换应用通过直观的界面设计和流畅的交互体验，为用户提供了便捷的主题管理工具。应用支持丰富的预设主题和灵活的自定义功能，满足不同用户的个性化需求。Material Design 3 的设计规范确保了界面的一致性和美观性。
通过鸿蒙Flutter的跨平台能力，该应用可以轻松适配鸿蒙OS和其他平台，为用户提供一致的使用体验。后续可以进一步扩展主题同步、社区分享、动态主题等功能，打造更加完善的主题管理解决方案。