v0.3.0 沉浸式按 SyncCalendar 重做(通知栏与页面完全同色)+ 个人信息卡改白块

## ① 沉浸式:改用本机 SyncCalendar 的方案(用户指定参考)

用户原话:「上面那一块的颜色和通知栏的颜色完全融为一体;
紧接着就是应用图标和标题,尽量靠上」。

三件套(缺一不可):
1. 系统栏涂**全透明** `#00000000`;
2. `setWindowBackgroundColor(页面底色)` 供透明系统栏透出;
3. **紧邻系统栏的元素不设自己的背景色** + 根容器 `expandSafeArea`。

🔴 第三件是最关键、也是我先前漏掉的一环:
我原来给顶栏设了白色 `backgroundColor`,于是状态栏(透出纸色)与顶栏(白)
仍上下拼接。读 SyncCalendar 源码发现它的 `header()` **根本没有 backgroundColor**
—— 这才是"融为一体"的真正机制。已在代码里写明原因,防止回退。

配套简化:删掉自己算安全区的那套(`statusBarH`/`bottomBarH`/
`loadWindowInsets`/`applyAvoidAreas`,共约 110 行)—— 不再手算,也就不会算错。

## ② 顶栏改「图标 + 标题」

按用户要求:应用图标 + 「家书」标题(下行小字显示当前模块)贴左上,
右侧铃铛与头像。顶栏高度 56 → 48vp,上下内边距压到 4,内容整体上移。

## ③ 个人信息卡恢复为白色卡片

用户明确要求("还是得用一个白色的块,这样显得好看")。
曾一度做成"不套卡片的头部"(理由是省首屏高度),现按用户观感改回白卡。
⚠️ 与顶栏的区别:顶栏**不能**有背景色(否则与状态栏割裂),
而这张卡在顶栏下方、与状态栏不相邻,套白卡没有这个问题。

## 验证(全部基于真机)

逐行像素采样(`_tooling/familybook_immersion_check.py`,
模型读不了图 ⇒ 用数字裁定,不靠目测):
· `y=0..271` 全为 `#F7F3EA` ⇒ **状态栏与顶栏同色,融为一体** ✓
· 底部 `y=2224..2444` 为纸色,无异常条 ✓

真机界面遍历(`_tooling/familybook_harmonyos_probe.py`):
· A 组抽屉 11 个模块 **11/11**
· B 组家谱 **1/1**;C 组通知/设置 **2/2**
· D 组深验(特征文本)**12/12**
合计 **14 个页面全通过**。

⚠️ 顺带修掉探针自身两个坑(都记进注释了):
· `nodes_of` 原来只收集**有文字**的节点 ⇒ 找不到纯图标的汉堡按钮,
  导致"抽屉打不开"、10 个模块连锁失败(看着像应用坏了,其实是探针瞎了);
· 汉堡按钮坐标写死 ⇒ 顶栏变矮后点空。改为在界面树里动态探测、
  并**排除系统状态栏区域**(那里也有可点击元素,曾误取到 (103,56))。

## 编译
0 error(保留 1 条 `setWindowBackgroundColor` 的 unavailable 告警,它是透明方案的必需组成)
This commit is contained in:
2026-10-12 08:43:32 +08:00
parent 0548a45da1
commit d6bda758d8
7 changed files with 142 additions and 188 deletions
+2 -13
View File
@@ -28,13 +28,6 @@ export struct FbDrawer {
@Param drawerW: number = FbMetric.drawerW;
/** 是否以「覆盖层」形态出现(宽屏时为 false = 常驻) */
@Param overlayMode: boolean = true;
/**
* 状态栏高度(vp)。
*
* 🔴 沉浸式后窗口铺满整屏 ⇒ 抽屉顶部的品牌区会钻到状态栏底下,必须让出这一段。
* 覆盖层形态下更要紧 —— 抽屉是贴屏幕顶的,不让位就会和状态栏的时间/信号叠在一起。
*/
@Param statusBarH: number = 0;
/** 覆盖层形态下:点遮罩关闭 */
@Event onDismiss: () => void = () => {
};
@@ -66,7 +59,7 @@ export struct FbDrawer {
}
.width('100%')
// 顶部内边距 = 状态栏高度 + 一点呼吸,保证不压状态栏
.padding({ left: 18, right: 12, top: this.statusBarH + 14, bottom: 10 })
.padding({ left: 18, right: 12, top: 16, bottom: 10 })
}
/** 一个模块行 */
@@ -208,8 +201,6 @@ export struct FbDrawer {
@ComponentV2
export struct FbDrawerShell {
@Param app: FbAppState = fbAppState();
/** 状态栏高度(vp),透传给抽屉(沉浸式后抽屉顶部要自己让位) */
@Param statusBarH: number = 0;
/** 内容区(由父组件通过尾随 lambda 传入) */
@BuilderParam content: () => void;
@@ -220,8 +211,7 @@ export struct FbDrawerShell {
Row() {
FbDrawer({
app: this.app,
overlayMode: false,
statusBarH: this.statusBarH
overlayMode: false
})
Column() {
this.content()
@@ -253,7 +243,6 @@ export struct FbDrawerShell {
FbDrawer({
app: this.app,
overlayMode: true,
statusBarH: this.statusBarH,
onDismiss: (): void => {
this.app.drawerOpen = false;
}