520kiss/wushu
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

深色模式、首页设置页面和功能优化

Browse Source
This commit is contained in:
Developer
2026-04-02 07:06:55 +08:00
parent f0a62ed68b
commit 954d173329
88 changed files with 12157 additions and 7578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
lib/views/profile/theme/app-diy.dart
View File

@@ -1,7 +1,8 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:get/get.dart';
import '../../../constants/app_constants.dart';
import '../../../services/get/theme_controller.dart';
/// 时间: 2026-03-27
/// 功能: 主题个性化设置页面
@@ -14,16 +15,13 @@ class AppDiyPage extends StatefulWidget {
}
class _AppDiyPageState extends State<AppDiyPage> {
// 主题设置
bool _isDarkMode = false;
int _themeColorIndex = 0;
int _fontSizeIndex = 1; // 0: 小, 1: 中, 2: 大
// GetX ThemeController
late ThemeController _themeController;
// 本地状态（不通过ThemeController管理的设置）
bool _showGuideOnStartup = true;
int _cardSizeIndex = 1; // 0: 小, 1: 中, 2: 大
bool _enableAnimation = true;
bool _enableBlurEffect = true;
bool _enableSystemNavigation = false;
int _accentColorIndex = 0;
// 滚动控制
final ScrollController _scrollController = ScrollController();
@@ -58,7 +56,9 @@ class _AppDiyPageState extends State<AppDiyPage> {
@override
void initState() {
super.initState();
_loadSettings();
// 获取 ThemeController
_themeController = Get.find<ThemeController>();
_loadLocalSettings();
_startScrolling();
// 延迟显示开发中提示对话框
WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -148,145 +148,185 @@ class _AppDiyPageState extends State<AppDiyPage> {
}
}
void _loadSettings() async {
final prefs = await SharedPreferences.getInstance();
/// 加载本地设置（不通过ThemeController管理的设置）
void _loadLocalSettings() async {
// ThemeController 会自动加载主题相关设置
// 这里只加载本地独有的设置
setState(() {
_isDarkMode = prefs.getBool('darkMode') ?? false;
_themeColorIndex = prefs.getInt('themeColorIndex') ?? 0;
_fontSizeIndex = prefs.getInt('fontSizeIndex') ?? 1;
_showGuideOnStartup = prefs.getBool('showGuideOnStartup') ?? true;
_cardSizeIndex = prefs.getInt('cardSizeIndex') ?? 1;
_enableAnimation = prefs.getBool('enableAnimation') ?? true;
_enableBlurEffect = prefs.getBool('enableBlurEffect') ?? true;
_showGuideOnStartup =
_themeController.prefs?.getBool('showGuideOnStartup') ?? true;
_cardSizeIndex = _themeController.prefs?.getInt('cardSizeIndex') ?? 1;
_enableSystemNavigation =
prefs.getBool('enableSystemNavigation') ?? false;
_accentColorIndex = prefs.getInt('accentColorIndex') ?? 0;
_themeController.prefs?.getBool('enableSystemNavigation') ?? false;
});
}
void _saveSettings() async {
final prefs = await SharedPreferences.getInstance();
prefs.setBool('darkMode', _isDarkMode);
prefs.setInt('themeColorIndex', _themeColorIndex);
prefs.setInt('fontSizeIndex', _fontSizeIndex);
prefs.setBool('showGuideOnStartup', _showGuideOnStartup);
prefs.setInt('cardSizeIndex', _cardSizeIndex);
prefs.setBool('enableAnimation', _enableAnimation);
prefs.setBool('enableBlurEffect', _enableBlurEffect);
prefs.setBool('enableSystemNavigation', _enableSystemNavigation);
prefs.setInt('accentColorIndex', _accentColorIndex);
/// 保存本地设置
void _saveLocalSettings() async {
await _themeController.prefs?.setBool(
'showGuideOnStartup',
_showGuideOnStartup,
);
await _themeController.prefs?.setInt('cardSizeIndex', _cardSizeIndex);
await _themeController.prefs?.setBool(
'enableSystemNavigation',
_enableSystemNavigation,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('个性化'),
backgroundColor: _isDarkMode ? Colors.grey[900] : Colors.white,
foregroundColor: _isDarkMode ? Colors.white : AppConstants.primaryColor,
elevation: 0,
),
backgroundColor: _isDarkMode ? Colors.grey[900] : Colors.grey[50],
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// 主题模式
_buildSection('显示设置'),
_buildSwitchItem('深色模式', _isDarkMode, (value) {
setState(() {
_isDarkMode = value;
_saveSettings();
});
}, icon: Icons.dark_mode),
// 使用 Obx 监听 ThemeController 的状态变化
return Obx(() {
final isDark = _themeController.isDarkModeRx.value;
final themeColorIdx = _themeController.themeColorIndexRx.value;
// 主题颜色
_buildSection('主题颜色'),
_buildColorSelector('色彩', _themeColors, _themeColorIndex, (index) {
setState(() {
_themeColorIndex = index;
_saveSettings();
});
}),
return Scaffold(
appBar: AppBar(
title: const Text('个性化'),
backgroundColor: isDark ? Colors.grey[900] : Colors.white,
foregroundColor: isDark ? Colors.white : AppConstants.primaryColor,
elevation: 0,
),
backgroundColor: isDark ? Colors.grey[900] : Colors.grey[50],
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// 主题模式
_buildSection('显示设置', isDark),
_buildSwitchItem(
'深色模式',
_themeController.isDarkModeRx.value,
(value) => _themeController.toggleDarkMode(value),
icon: Icons.dark_mode,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
_buildColorSelector('强调色', _accentColors, _accentColorIndex, (index) {
setState(() {
_accentColorIndex = index;
_saveSettings();
});
}),
// 主题颜色
_buildSection('主题颜色', isDark),
_buildColorSelector(
'色彩',
_themeColors,
_themeController.themeColorIndexRx.value,
(index) => _themeController.setThemeColorIndex(index),
isDark: isDark,
),
// 字体大小
_buildSection('字体设置'),
_buildOptionSelector('字体大小', _fontSizes, _fontSizeIndex, (index) {
if (index != null) {
setState(() {
_fontSizeIndex = index;
_saveSettings();
});
}
}, icon: Icons.font_download),
_buildColorSelector(
'强调色',
_accentColors,
_themeController.accentColorIndexRx.value,
(index) => _themeController.setAccentColorIndex(index),
isDark: isDark,
),
// 卡片大小
_buildSection('界面设置'),
_buildOptionSelector('卡片阴影', _cardSizes, _cardSizeIndex, (index) {
if (index != null) {
setState(() {
_cardSizeIndex = index;
_saveSettings();
});
}
}, icon: Icons.crop_square),
// 字体大小
_buildSection('字体设置', isDark),
_buildOptionSelector(
'字体大小',
_fontSizes,
_themeController.fontSizeIndexRx.value,
(index) {
if (index != null) {
_themeController.setFontSizeIndex(index);
}
},
icon: Icons.font_download,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
// 启动显示
_buildSwitchItem('启动时显示引导页', _showGuideOnStartup, (value) {
setState(() {
_showGuideOnStartup = value;
_saveSettings();
});
}, icon: Icons.info_outline),
// 卡片大小
_buildSection('界面设置', isDark),
_buildOptionSelector(
'卡片阴影',
_cardSizes,
_cardSizeIndex,
(index) {
if (index != null) {
setState(() {
_cardSizeIndex = index;
});
_saveLocalSettings();
}
},
icon: Icons.crop_square,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
// 动画效果
_buildSwitchItem('启用动画效果', _enableAnimation, (value) {
setState(() {
_enableAnimation = value;
_saveSettings();
});
}, icon: Icons.animation),
// 启动显示
_buildSwitchItem(
'启动时显示引导页',
_showGuideOnStartup,
(value) {
setState(() {
_showGuideOnStartup = value;
});
_saveLocalSettings();
},
icon: Icons.info_outline,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
// 模糊效果
_buildSwitchItem('启用模糊效果', _enableBlurEffect, (value) {
setState(() {
_enableBlurEffect = value;
_saveSettings();
});
}, icon: Icons.blur_on),
// 动画效果
_buildSwitchItem(
'启用动画效果',
_themeController.enableAnimationRx.value,
(value) => _themeController.toggleAnimation(value),
icon: Icons.animation,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
// 系统导航
_buildSwitchItem('软件悬浮球', _enableSystemNavigation, (value) {
setState(() {
_enableSystemNavigation = value;
_saveSettings();
});
}, icon: Icons.navigation),
// 模糊效果
_buildSwitchItem(
'启用模糊效果',
_themeController.enableBlurEffectRx.value,
(value) => _themeController.toggleBlurEffect(value),
icon: Icons.blur_on,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
_buildSwitchItem('转场动画', _enableAnimation, (value) {
setState(() {
// _enableAnimation = value;
_saveSettings();
});
}, icon: Icons.track_changes),
// 系统导航
_buildSwitchItem(
'软件悬浮球',
_enableSystemNavigation,
(value) {
setState(() {
_enableSystemNavigation = value;
});
_saveLocalSettings();
},
icon: Icons.navigation,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
// 设计风格
_buildSection('设计风格'),
_buildDesignStyleCard(),
_buildSwitchItem(
'转场动画',
_themeController.enableAnimationRx.value,
(value) => _themeController.toggleAnimation(value),
icon: Icons.track_changes,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(height: 40),
],
),
);
// 设计风格
_buildSection('设计风格', isDark),
_buildDesignStyleCard(isDark, themeColorIdx),
const SizedBox(height: 40),
],
),
);
});
}
Widget _buildSection(String title) {
Widget _buildSection(String title, bool isDark) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
child: Text(
@@ -294,7 +334,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: _isDarkMode ? Colors.grey[300] : Colors.grey[700],
color: isDark ? Colors.grey[300] : Colors.grey[700],
),
),
);
@@ -305,11 +345,13 @@ class _AppDiyPageState extends State<AppDiyPage> {
bool value,
ValueChanged<bool> onChanged, {
required IconData icon,
required bool isDark,
required int themeColorIdx,
}) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
color: _isDarkMode ? Colors.grey[800] : Colors.white,
color: isDark ? Colors.grey[800] : Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
@@ -320,15 +362,15 @@ class _AppDiyPageState extends State<AppDiyPage> {
],
),
child: ListTile(
leading: Icon(icon, color: _themeColors[_themeColorIndex]),
leading: Icon(icon, color: _themeColors[themeColorIdx]),
title: Text(
title,
style: TextStyle(color: _isDarkMode ? Colors.white : Colors.black87),
style: TextStyle(color: isDark ? Colors.white : Colors.black87),
),
trailing: Switch(
value: value,
onChanged: onChanged,
activeThumbColor: _themeColors[_themeColorIndex],
activeThumbColor: _themeColors[themeColorIdx],
),
),
);
@@ -340,11 +382,13 @@ class _AppDiyPageState extends State<AppDiyPage> {
int selectedIndex,
ValueChanged<int?> onChanged, {
required IconData icon,
required bool isDark,
required int themeColorIdx,
}) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
color: _isDarkMode ? Colors.grey[800] : Colors.white,
color: isDark ? Colors.grey[800] : Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
@@ -355,10 +399,10 @@ class _AppDiyPageState extends State<AppDiyPage> {
],
),
child: ListTile(
leading: Icon(icon, color: _themeColors[_themeColorIndex]),
leading: Icon(icon, color: _themeColors[themeColorIdx]),
title: Text(
title,
style: TextStyle(color: _isDarkMode ? Colors.white : Colors.black87),
style: TextStyle(color: isDark ? Colors.white : Colors.black87),
),
trailing: DropdownButton<int>(
value: selectedIndex,
@@ -372,14 +416,12 @@ class _AppDiyPageState extends State<AppDiyPage> {
value: entry.key,
child: Text(
entry.value,
style: TextStyle(
color: _isDarkMode ? Colors.white : Colors.black87,
),
style: TextStyle(color: isDark ? Colors.white : Colors.black87),
),
);
}).toList(),
dropdownColor: _isDarkMode ? Colors.grey[800] : Colors.white,
style: TextStyle(color: _isDarkMode ? Colors.white : Colors.black87),
dropdownColor: isDark ? Colors.grey[800] : Colors.white,
style: TextStyle(color: isDark ? Colors.white : Colors.black87),
),
),
);
@@ -389,12 +431,13 @@ class _AppDiyPageState extends State<AppDiyPage> {
String title,
List<Color> colors,
int selectedIndex,
ValueChanged<int> onChanged,
) {
ValueChanged<int> onChanged, {
required bool isDark,
}) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
color: _isDarkMode ? Colors.grey[800] : Colors.white,
color: isDark ? Colors.grey[800] : Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
@@ -407,7 +450,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
child: ListTile(
title: Text(
title,
style: TextStyle(color: _isDarkMode ? Colors.white : Colors.black87),
style: TextStyle(color: isDark ? Colors.white : Colors.black87),
),
trailing: Row(
mainAxisSize: MainAxisSize.min,
@@ -423,7 +466,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
shape: BoxShape.circle,
border: entry.key == selectedIndex
? Border.all(
color: _isDarkMode ? Colors.white : Colors.black,
color: isDark ? Colors.white : Colors.black,
width: 2,
)
: null,
@@ -436,11 +479,11 @@ class _AppDiyPageState extends State<AppDiyPage> {
);
}
Widget _buildDesignStyleCard() {
Widget _buildDesignStyleCard(bool isDark, int themeColorIdx) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 4),
decoration: BoxDecoration(
color: _isDarkMode ? Colors.grey[800] : Colors.white,
color: isDark ? Colors.grey[800] : Colors.white,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
@@ -464,7 +507,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
),
child: Icon(
Icons.design_services,
color: _isDarkMode ? Colors.teal[300] : Colors.teal[700],
color: isDark ? Colors.teal[300] : Colors.teal[700],
size: 20,
),
),
@@ -474,7 +517,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: _isDarkMode ? Colors.white : Colors.black87,
color: isDark ? Colors.white : Colors.black87,
),
),
],
@@ -487,7 +530,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
children: [
GestureDetector(
onTap: _toggleScroll,
child: Container(
child: SizedBox(
height: 40,
child: SingleChildScrollView(
controller: _scrollController,
@@ -498,19 +541,38 @@ class _AppDiyPageState extends State<AppDiyPage> {
'Material 2',
Icons.style,
isMd: true,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(width: 8),
_buildStyleChip(
'Material 3',
Icons.auto_awesome,
isMd: true,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(width: 8),
_buildStyleChip('透明毛玻璃', Icons.blur_on),
_buildStyleChip(
'透明毛玻璃',
Icons.blur_on,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(width: 8),
_buildStyleChip('沉浸式渐变色', Icons.color_lens),
_buildStyleChip(
'沉浸式渐变色',
Icons.color_lens,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(width: 8),
_buildStyleChip('动态光感效果', Icons.lightbulb_outline),
_buildStyleChip(
'动态光感效果',
Icons.lightbulb_outline,
isDark: isDark,
themeColorIdx: themeColorIdx,
),
const SizedBox(width: 8),
],
),
@@ -523,8 +585,8 @@ class _AppDiyPageState extends State<AppDiyPage> {
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
_themeColors[_themeColorIndex].withAlpha(10),
_themeColors[_themeColorIndex].withAlpha(5),
_themeColors[themeColorIdx].withAlpha(10),
_themeColors[themeColorIdx].withAlpha(5),
],
),
borderRadius: BorderRadius.circular(8),
@@ -534,7 +596,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
Icon(
Icons.lightbulb_outline,
size: 16,
color: _themeColors[_themeColorIndex],
color: _themeColors[themeColorIdx],
),
const SizedBox(width: 8),
Expanded(
@@ -542,9 +604,7 @@ class _AppDiyPageState extends State<AppDiyPage> {
'采用现代Material Design设计语言，\n参考透明毛玻璃、沉浸式渐变色和动态光感等效果',
style: TextStyle(
fontSize: 12,
color: _isDarkMode
? Colors.grey[300]
: Colors.grey[700],
color: isDark ? Colors.grey[300] : Colors.grey[700],
),
),
),
@@ -559,10 +619,16 @@ class _AppDiyPageState extends State<AppDiyPage> {
);
}
Widget _buildStyleChip(String label, IconData icon, {bool isMd = false}) {
Widget _buildStyleChip(
String label,
IconData icon, {
bool isMd = false,
required bool isDark,
required int themeColorIdx,
}) {
final color = isMd
? _themeColors[_themeColorIndex]
: _isDarkMode
? _themeColors[themeColorIdx]
: isDark
? Colors.blue[400]!
: Colors.blue[600]!;