docs(plans): 留痕 K61 导航栏闪白修复
This commit is contained in:
Zhou Weidong committed
1 parent
0a48d2739a
commit
a755a5f657
2 files changed
+53
-25
No files matched your search
+23
-25
@@ -1,32 +1,30 @@
|
||||
## [已处理] 2026-10-20 | K60-A 用 flutter_native_splash 接管原生开屏（透明观感，无黑屏）（仅 App 端）
|
||||
## [已处理] 2026-10-20 | K61-A 修复进入详情页/播放列表时底部闪白（系统导航栏与底部弹层）（仅 App 端）
|
||||
|
||||
**用户指令（2026-10-20，原文）**：
|
||||
> 「启动屏用户这flutter_native_splash 把原生的改成透明」
|
||||
> 「现在有个问题 在安卓端 点击短剧标题 进入详情 底部会闪一下白色 进入短剧播放列表底部也会闪一下白色」
|
||||
|
||||
**口径**
|
||||
1. `dev_dependencies` 增加 `flutter_native_splash`（取当前 pub 稳定版）。
|
||||
2. `pubspec.yaml` 增加配置（不配置 image，原生阶段不出现任何静态图）：
|
||||
```yaml
|
||||
flutter_native_splash:
|
||||
color: "#FFF8F0"
|
||||
color_dark: "#FFF8F0"
|
||||
android: true
|
||||
ios: true
|
||||
web: false
|
||||
android_12:
|
||||
color: "#FFF8F0"
|
||||
color_dark: "#FFF8F0"
|
||||
icon_background_color: "#FFF8F0"
|
||||
```
|
||||
说明：Android 12 及 iOS 的启动背景必须是实色，纯透明会被系统渲染成黑色；这里用与 Flutter 动画开屏完全一致的 `#FFF8F0`，视觉上就是「无原生开屏、直接进动画」，不存在黑屏。
|
||||
3. 执行 `dart run flutter_native_splash:create` 生成原生资源：
|
||||
- Android：`launch_background.xml`、`values-v31`/`values-night-v31` 的 splash 背景统一 `#FFF8F0`，无 image；
|
||||
- iOS：LaunchScreen.storyboard 仅纯色背景、无 LaunchImage。
|
||||
4. 清理此前手写的冲突项（如 `drawable/splash_transparent.xml`、自定义 splash_icon 引用）；保留 Flutter 动画开屏页（K58-A 浅色版）。
|
||||
5. 在 README 或 pubspec 注释注明：以后改开屏配置后需重新执行 `dart run flutter_native_splash:create`。
|
||||
**根因（已定位）**
|
||||
1. `app.dart` 全局 `SystemUiOverlayStyle` 里 `systemNavigationBarColor: AppColors.bar`（#FFFDFB，近白），且未关闭 `systemNavigationBarContrastEnforced`。Android 15/16 强制 edge-to-edge 时，系统会在透明导航栏后绘制**默认白色对比遮罩**，页面切换/弹层动画的瞬间就露出这条白带；
|
||||
2. 详情页（ink #FFF8F0）与播放器（黑底）都没有覆盖导航栏颜色，弹层（选集列表）打开时导航栏仍是白色；
|
||||
3. `MaterialApp` 未约束 `BottomSheetThemeData`，`showModalBottomSheet` 动画首帧可能露出默认白色表面。
|
||||
|
||||
**口径（只改 Flutter，不动后端、不改接口）**
|
||||
1. 全局（`app.dart`）：`SystemUiOverlayStyle.dark.copyWith(...)` 增加
|
||||
- `systemNavigationBarColor: AppColors.ink`
|
||||
- `systemNavigationBarDividerColor: Colors.transparent`
|
||||
- `systemNavigationBarContrastEnforced: false`
|
||||
- `statusBarColor: Colors.transparent`（保留）
|
||||
2. `MaterialApp.theme` 增加：
|
||||
- `bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent, modalBackgroundColor: Colors.transparent, surfaceTintColor: Colors.transparent)`
|
||||
3. 播放器（全屏与首页 feed）：`PlayerPage` 外包 `AnnotatedRegion<SystemUiOverlayStyle>`，`systemNavigationBarColor: Colors.black`、`systemNavigationBarContrastEnforced: false`、浅色图标。
|
||||
4. 详情页：`AnnotatedRegion` 导航栏 `AppColors.ink`、对比遮罩关闭；`DramaDetailBottomBar` 区域不得出现白色底。
|
||||
5. 选集等底部弹层：打开期间导航栏颜色与弹层一致（`EpisodePickerSheet` 为 `AppColors.card`），并在弹层内使用 `SafeArea(bottom: true)`；关闭后恢复全局 ink。
|
||||
6. 不改任何数据/交互逻辑。
|
||||
|
||||
**测试/门禁**
|
||||
- 静态检查：生成的 launch_background / v31 styles 背景为 #FFF8F0、无 bitmap；iOS storyboard 无 LaunchImage；
|
||||
- 新增：全局 overlay style 断言 `systemNavigationBarContrastEnforced == false`、`systemNavigationBarColor == AppColors.ink`；
|
||||
- 播放页黑底导航栏、详情页 ink 导航栏断言；
|
||||
- 抽查选集弹层打开时导航栏颜色为 card；
|
||||
- `dart analyze lib test` 零告警 + `flutter test` 全过 + `flutter build apk --debug`。
|
||||
|
||||
**流程**：从 `develop` 拉 `feature/flutter-k60-native-splash`；作者 `Zhou Weidong <502333560@qq.com>`；`--no-ff` 合回 develop 并 push；PROGRESS 留痕；真机验收由用户执行。
|
||||
**流程**：从 `develop` 拉 `fix/flutter-k61-navbar-flash`；作者 `Zhou Weidong <502333560@qq.com>`；`--no-ff` 合回 develop 并 push；PROGRESS 留痕；真机验收由用户执行。
|
||||
@@ -22100,6 +22100,36 @@ Running Gradle task 'assembleDebug'...
|
||||
|
||||
解读：静态检查零告警，471 条测试全部通过，debug APK 构建成功。原生启动只保留浅暖纯色过渡，无静态 logo 或 LaunchImage，随后直接进入 Flutter 动画开屏。
|
||||
|
||||
## 2026-10-20 ReelShort：K61-A 修复底部导航栏闪白
|
||||
|
||||
- 前置状态：K60-A 已完成并合并，develop 合并提交 `9eec9ed`。
|
||||
- 分支：`fix/flutter-k61-navbar-flash`
|
||||
- 功能提交：`0aa5a99 fix(flutter): 修复详情与播放器底部闪白`
|
||||
- develop 合并提交：`51e9402 merge: 合并 K61 导航栏闪白修复`，已推送。
|
||||
- 全局 `appSystemOverlayStyle` 改导航栏为 `AppColors.ink`，分隔线透明、关闭 `systemNavigationBarContrastEnforced`，状态栏保持透明。
|
||||
- `AppTheme.light()` 的 BottomSheet 背景、modal 背景和 surface tint 全部透明；播放页覆盖黑色导航栏和浅色图标，详情页覆盖 ink 导航栏和深色图标，底部操作条保持 ink。
|
||||
- EpisodePickerSheet 打开期间覆盖 `AppColors.card` 导航栏，底部显式 SafeArea，关闭后恢复所属页面 overlay。
|
||||
|
||||
测试：新增全局 overlay/主题断言、首页 feed 与全屏播放器黑导航、详情页 ink 导航、选集弹层 card 导航与 SafeArea 断言。
|
||||
|
||||
门禁原始输出：
|
||||
|
||||
```text
|
||||
$ dart analyze lib test
|
||||
Analyzing lib, test...
|
||||
No issues found!
|
||||
|
||||
$ flutter test
|
||||
00:56 +473: All tests passed!
|
||||
|
||||
$ flutter build apk --debug
|
||||
Running Gradle task 'assembleDebug'...
|
||||
14.2s
|
||||
✓ Built build/app/outputs/flutter-apk/app-debug.apk
|
||||
```
|
||||
|
||||
解读：静态检查零告警，473 条测试全部通过，debug APK 构建成功。全局、路由和弹层三层导航栏颜色已统一，Android 15/16 edge-to-edge 对比遮罩被关闭。
|
||||
|
||||
## 2026-10-20 ReelShort：K53-A 详情页首帧直出
|
||||
|
||||
- 前置状态：K52-A 已完成并合并，develop 合并提交 `a11ba50`。
|
||||
|
||||
Reference in new issue
Block a user