【Flutter for OpenHarmony】实战 - Day 4(2)：个人页开发及主题适配
本文总结了开源鸿蒙跨平台社区项目的主题适配工作进展。已完成个人页统计卡片、课程页周次选择按钮、作业页筛选标签等模块的深色/浅色主题适配，优化了周次选择弹窗布局，解决了超边界问题。所有页面和组件均已支持主题切换，并通过运行验证确保功能正常。下一步将重点开发数据持久化功能（SQLite接入）和作业到期本地通知。代码已上传至指定仓库，欢迎开发者加入社区参与贡献。
·
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
一、本日目标
- 完善个人页统计卡片主题适配
- 修复课程页周次选择按钮主题跟随
- 修复作业页筛选标签和统计栏主题适配
- 优化周次选择弹窗布局（超边界问题）
二、完成的工作
2.1 个人页统计卡片主题适配
| 修复项 | 说明 |
|---|---|
| 卡片背景色 | 深色模式 darkCardBackground，浅色模式 white |
| 统计数字颜色 | 跟随主题文字颜色 |
| 统计标签颜色 | 跟随主题次要文字颜色 |
| 图标颜色 | 保持不变（蓝/橙/绿） |
2.2 课程页周次选择按钮主题适配
| 修复项 | 说明 |
|---|---|
| 按钮图标 | 简化为纯图标，自动跟随主题颜色 |
| 周次选择弹窗 | 完整适配深色/浅色模式，使用 Theme.of(context) 获取主题色 |
| 弹窗布局 | 修复超边界问题，限制高度为屏幕65%，使用 Flexible 替代 Expanded |
2.3 作业页主题适配
| 修复项 | 说明 |
|---|---|
| 筛选标签 | FilterChip 背景色和文字颜色跟随主题 |
| 统计栏 | 背景色、文字颜色跟随主题 |
| 页面背景 | 跟随主题 scaffoldBackgroundColor |
| 复选框 | 已在 HomeworkCard 中适配 |
| 作业状态 | 已完成/未完成样式已在 HomeworkCard 中适配 |
2.4 周次选择弹窗布局优化
- 添加
isScrollControlled: true允许自定义高度 - 设置高度为屏幕65%，解决超边界问题
- 调整网格卡片宽高比为
1.2，使卡片更紧凑 - 减小网格间距，优化显示效果
三、修改文件清单
| 文件 | 修改内容 |
|---|---|
lib/pages/home_page.dart |
周次选择按钮简化、周次选择弹窗主题适配和布局修复 |
lib/pages/profile_page.dart |
统计卡片主题适配 |
lib/pages/homework_page.dart |
筛选标签、统计栏主题适配 |
lib/widgets/course_card.dart |
卡片主题适配（已完成） |
lib/widgets/homework_card.dart |
卡片主题适配（已完成） |
lib/widgets/date_selector.dart |
日期选择器主题适配（已完成） |
lib/constants/colors.dart |
深色/浅色主题颜色定义 |
lib/providers/theme_provider.dart |
主题状态管理 |
lib/main.dart |
主题配置集成 |
四、当前状态
| 模块 | 主题适配状态 |
|---|---|
| 课表页 - AppBar | ✅ 已完成 |
| 课表页 - 周次选择按钮 | ✅ 已完成 |
| 课表页 - 周次选择弹窗 | ✅ 已完成（含布局修复） |
| 课表页 - 日期选择器 | ✅ 已完成 |
| 课表页 - 课程卡片 | ✅ 已完成 |
| 作业页 - 筛选标签 | ✅ 已完成 |
| 作业页 - 统计栏 | ✅ 已完成 |
| 作业页 - 作业卡片 | ✅ 已完成 |
| 作业页 - 浮动按钮 | ✅ 已完成 |
| 个人页 - 头部 | ✅ 已完成 |
| 个人页 - 统计卡片 | ✅ 已完成 |
| 个人页 - 功能菜单 | ✅ 已完成 |
| 个人页 - 主题设置弹窗 | ✅ 已完成 |
五、运行验证
flutter run
| 验证项 | 预期结果 |
|---|---|
| 切换深色模式 | 所有页面颜色自动更新 |
| 切换浅色模式 | 恢复浅色配色 |
| 跟随系统 | 自动响应系统主题 |
| 周次弹窗布局 | 不超出屏幕边界，20周完整显示 |
| 主题设置持久化 | 重启应用后保持上次选择 |
六、下一步计划
| 任务 | 优先级 |
|---|---|
| 数据持久化（SQLite 接入） | 高 |
| 作业到期本地通知 | 中 |
| 课表导入功能（拍照识别） | 低 |
本日完成：项目主题适配全面完成，所有页面和组件均已支持深色/浅色模式切换，周次选择弹窗布局问题已修复。下一步将专注于数据持久化功能。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)