89 lines
1.7 KiB
Markdown
89 lines
1.7 KiB
Markdown
|
# 底部导航栏优化 - 添加图标下方文字
|
||
|
|
|
||
|
|
## 1. 功能概述
|
||
|
|
- **功能名称**: 底部导航栏添加文字标签
|
||
|
|
- **优先级**: P1
|
||
|
|
- **负责人**: 开发团队
|
||
|
|
- **预计工期**: 30 分钟
|
||
|
|
|
||
|
|
## 2. 业务背景
|
||
|
|
|
||
|
|
### 当前痛点
|
||
|
|
- 底部导航栏只有图标，没有文字
|
||
|
|
- 用户需要猜测每个图标的功能
|
||
|
|
- 用户体验不够友好
|
||
|
|
|
||
|
|
### 解决方案
|
||
|
|
- 在图标下方添加文字标签
|
||
|
|
- 提高可识别性和易用性
|
||
|
|
|
||
|
|
### 预期收益
|
||
|
|
- ✅ 提升用户体验
|
||
|
|
- ✅ 提高导航清晰度
|
||
|
|
- ✅ 符合 Material Design 规范
|
||
|
|
|
||
|
|
## 3. UI/UX 设计
|
||
|
|
|
||
|
|
### 当前样式
|
||
|
|
```
|
||
|
|
[🏠] [📈] [💱] [💰] [👤]
|
||
|
|
```
|
||
|
|
|
||
|
|
### 修改后样式
|
||
|
|
```
|
||
|
|
[🏠] [📈] [💱] [💰] [👤]
|
||
|
|
首页 行情 交易 资产 我的
|
||
|
|
```
|
||
|
|
|
||
|
|
## 4. 技术方案
|
||
|
|
|
||
|
|
### 修改文件
|
||
|
|
- `lib/ui/pages/main/main_page.dart`
|
||
|
|
|
||
|
|
### 修改内容
|
||
|
|
|
||
|
|
**当前代码**:
|
||
|
|
```dart
|
||
|
|
Icon(
|
||
|
|
item.icon,
|
||
|
|
size: 24,
|
||
|
|
color: isActive ? AppColorScheme.darkPrimary : AppColorScheme.darkOnSurfaceVariant,
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
**修改后代码**:
|
||
|
|
```dart
|
||
|
|
Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
Icon(
|
||
|
|
item.icon,
|
||
|
|
size: 24,
|
||
|
|
color: isActive ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||
|
|
),
|
||
|
|
const SizedBox(height: 4),
|
||
|
|
Text(
|
||
|
|
item.label,
|
||
|
|
style: TextStyle(
|
||
|
|
fontSize: 12,
|
||
|
|
color: isActive ? colorScheme.primary : colorScheme.onSurfaceVariant,
|
||
|
|
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
)
|
||
|
|
```
|
||
|
|
|
||
|
|
## 5. 验收标准
|
||
|
|
|
||
|
|
- [ ] 每个图标下方都有文字标签
|
||
|
|
- [ ] 文字清晰可读
|
||
|
|
- [ ] 激活状态文字加粗
|
||
|
|
- [ ] 支持主题切换
|
||
|
|
- [ ] 不影响现有功能
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**创建日期**: 2026-03-24 02:50 GMT+8
|
||
|
|
**状态**: 待执行
|