60 lines
1.7 KiB
Markdown
60 lines
1.7 KiB
Markdown
# 主页诗词卡片骨架屏设计文档
|
||
|
||
## 问题描述
|
||
|
||
当前主页诗词卡片在点击加载下一条时会出现闪白现象，原因是：
|
||
1. `poetryData.value = newPoetryData` 触发整个卡片重建
|
||
2. 重建过程中卡片内容短暂消失，显示白色背景
|
||
3. 用户体验不佳，应该有平滑的过渡效果
|
||
|
||
## 解决方案
|
||
|
||
### 方案：骨架屏过渡（推荐）
|
||
|
||
在加载新数据时，保持卡片容器显示，使用骨架屏（Skeleton）代替实际内容，实现平滑过渡。
|
||
|
||
**核心思路：**
|
||
1. 卡片容器始终存在，不随数据变化而销毁重建
|
||
2. 每个区域（标题、诗句、原文、关键词、译文）独立控制加载状态
|
||
3. 加载时使用骨架屏动画，加载完成后显示实际内容
|
||
4. 避免整个卡片的闪白现象
|
||
|
||
**技术实现：**
|
||
1. 修改 `PoetryCard` 组件，添加骨架屏支持
|
||
2. 使用 `Shimmer` 效果或自定义骨架动画
|
||
3. 保持卡片背景色在加载过程中不变
|
||
4. 分区域加载，逐步显示内容
|
||
|
||
## 文件修改
|
||
|
||
### 1. home_part.dart
|
||
- 修改 `PoetryCard` 组件
|
||
- 添加骨架屏 Widget
|
||
- 优化加载状态的显示逻辑
|
||
|
||
### 2. home_controller.dart（如有需要）
|
||
- 调整加载状态的管理
|
||
- 确保骨架屏在正确时机显示
|
||
|
||
## 设计要点
|
||
|
||
1. **骨架屏样式**
|
||
- 使用与卡片背景对比的颜色
|
||
- 添加脉冲动画效果
|
||
- 保持与内容区域相同的尺寸
|
||
|
||
2. **过渡动画**
|
||
- 骨架屏到实际内容的淡入淡出
|
||
- 避免突兀的切换
|
||
|
||
3. **深色模式支持**
|
||
- 骨架屏颜色适配深色/浅色模式
|
||
- 保持视觉一致性
|
||
|
||
## 预期效果
|
||
|
||
- 点击下一条时，卡片保持显示
|
||
- 各区域显示骨架屏动画
|
||
- 数据加载完成后，内容平滑过渡显示
|
||
- 无闪白现象，用户体验流畅
|