94 lines
2.3 KiB
Markdown
94 lines
2.3 KiB
Markdown
|
# 修复主题切换功能 - 动态颜色系统
|
|||
|
|
|
|||
|
|
## 1. 功能概述
|
|||
|
|
- **功能名称**: 修复主题切换，支持明暗主题动态切换
|
|||
|
|
- **优先级**: P0
|
|||
|
|
- **负责人**: 开发团队
|
|||
|
|
- **预计工期**: 2 小时
|
|||
|
|
|
|||
|
|
## 2. 业务背景
|
|||
|
|
|
|||
|
|
### 当前痛点
|
|||
|
|
- 所有页面使用硬编码的 `AppColorScheme.dark*` 颜色
|
|||
|
|
- 主题切换功能不生效
|
|||
|
|
- 只有深色主题，没有浅色主题
|
|||
|
|
- 用户体验不一致
|
|||
|
|
|
|||
|
|
### 解决方案
|
|||
|
|
- 使用 `Theme.of(context)` 动态获取当前主题颜色
|
|||
|
|
- 所有页面支持明暗主题切换
|
|||
|
|
- 统一使用 Theme Provider 提供的主题
|
|||
|
|
|
|||
|
|
### 预期收益
|
|||
|
|
- ✅ 主题切换功能正常工作
|
|||
|
|
- ✅ 支持深色和浅色主题
|
|||
|
|
- ✅ 提升用户体验
|
|||
|
|
- ✅ 代码更规范
|
|||
|
|
|
|||
|
|
## 3. 技术方案
|
|||
|
|
|
|||
|
|
### 3.1 问题代码示例
|
|||
|
|
|
|||
|
|
**❌ 错误写法**（当前）:
|
|||
|
|
```dart
|
|||
|
|
Container(
|
|||
|
|
color: AppColorScheme.darkBackground, // 硬编码深色
|
|||
|
|
child: Text(
|
|||
|
|
'Hello',
|
|||
|
|
style: TextStyle(color: AppColorScheme.darkOnSurface), // 硬编码
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**✅ 正确写法**（修复后）:
|
|||
|
|
```dart
|
|||
|
|
Container(
|
|||
|
|
color: Theme.of(context).colorScheme.background, // 动态
|
|||
|
|
child: Text(
|
|||
|
|
'Hello',
|
|||
|
|
style: TextStyle(color: Theme.of(context).colorScheme.onSurface), // 动态
|
|||
|
|
),
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3.2 修改策略
|
|||
|
|
|
|||
|
|
1. **替换所有硬编码颜色**
|
|||
|
|
- `AppColorScheme.darkBackground` → `Theme.of(context).colorScheme.background`
|
|||
|
|
- `AppColorScheme.darkOnSurface` → `Theme.of(context).colorScheme.onSurface`
|
|||
|
|
- 等等...
|
|||
|
|
|
|||
|
|
2. **确保 ThemeProvider 正常工作**
|
|||
|
|
- 检查 ThemeProvider 实现
|
|||
|
|
- 确保明暗主题配置正确
|
|||
|
|
|
|||
|
|
3. **测试主题切换**
|
|||
|
|
- 在"我的"页面测试主题切换
|
|||
|
|
- 验证所有页面响应主题变化
|
|||
|
|
|
|||
|
|
## 4. 需要修改的文件
|
|||
|
|
|
|||
|
|
### 主要页面
|
|||
|
|
1. `lib/ui/pages/home/home_page.dart` - 首页
|
|||
|
|
2. `lib/ui/pages/market/market_page.dart` - 行情页面
|
|||
|
|
3. `lib/ui/pages/trade/trade_page.dart` - 交易页面
|
|||
|
|
4. `lib/ui/pages/asset/asset_page.dart` - 资产页面
|
|||
|
|
5. `lib/ui/pages/mine/mine_page.dart` - 我的页面
|
|||
|
|
6. `lib/ui/pages/orders/*.dart` - 订单页面
|
|||
|
|
|
|||
|
|
### 组件
|
|||
|
|
7. `lib/ui/components/*.dart` - 所有组件
|
|||
|
|
|
|||
|
|
## 5. 验收标准
|
|||
|
|
|
|||
|
|
- [ ] 所有页面使用动态颜色（Theme.of(context)）
|
|||
|
|
- [ ] 主题切换功能正常工作
|
|||
|
|
- [ ] 深色主题显示正常
|
|||
|
|
- [ ] 浅色主题显示正常
|
|||
|
|
- [ ] 所有页面响应主题变化
|
|||
|
|
- [ ] flutter analyze 0 errors
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**创建日期**: 2026-03-24 02:34 GMT+8
|