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:
@@ -33,23 +33,18 @@ export default class EntryAbility extends UIAbility {
|
||||
hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err));
|
||||
}
|
||||
|
||||
// ② 沉浸式 + 系统栏配色。
|
||||
// ② 沉浸式：系统栏**全透明**，让应用自己的背景透上去。
|
||||
try {
|
||||
const win: window.Window = windowStage.getMainWindowSync();
|
||||
this.mainWindow = win;
|
||||
|
||||
// 🔴 关键一步：让窗口**铺满整屏**（内容延伸到状态栏 / 手势条区域）。
|
||||
// 不开这个的话，系统会把窗口整体推到状态栏下方 —— 那时如果页面再自己
|
||||
// "让出安全区"，就会**重复避让**（实测 156px 的顶部空白，用户反馈
|
||||
// 「首页距离上面那么远」就是这个原因）。
|
||||
// 开了之后：窗口占满全屏，页面用 getWindowAvoidArea 的高度自己让位，
|
||||
// 于是顶栏底色能一直顶到屏幕最上沿，状态栏看起来是"融"在顶栏里的。
|
||||
win.setWindowLayoutFullScreen(true);
|
||||
|
||||
// 页面侧要在 aboutToAppear 里**同步**读避让区，而 window.getLastWindow()
|
||||
// 只有异步版 ⇒ 由这里存一份窗口引用进 AppStorage。
|
||||
// ⚠️ 这里**不调** `setWindowLayoutFullScreen(true)`。
|
||||
// 本机另一个应用（SyncCalendar）用的是"透明系统栏 + expandSafeArea"那套，
|
||||
// 实测效果更干净：窗口布局不动（子组件位置不受影响），
|
||||
// 只把系统栏涂成全透明、让窗口底色透出来 ⇒ 顶部通知栏与页面**同色**，
|
||||
// 页面侧也不用自己去算状态栏高度、加 padding。
|
||||
// 之前用 setWindowLayoutFullScreen 时，窗口真的铺到状态栏底下，
|
||||
// 页面反而要手动让位，容易算错（踩过一次"重复避让"的坑）。
|
||||
AppStorage.setOrCreate<window.Window>('fbMainWindow', win);
|
||||
|
||||
this.applySystemBars(win);
|
||||
} catch (err) {
|
||||
hilog.error(DOMAIN, 'FamilyBook', 'immersive setup failed: %{public}s', JSON.stringify(err));
|
||||
@@ -133,34 +128,35 @@ export default class EntryAbility extends UIAbility {
|
||||
/**
|
||||
* 系统栏配色。
|
||||
*
|
||||
* 🔴 关键：**状态栏底色必须与它紧邻的元素同色**，否则会出现一条割裂的色带。
|
||||
* 实测教训 —— 原先这里把状态栏设为「页面底色（宣纸米 #F7F3EA）」，
|
||||
* 而顶栏是白色 #FFFFFF，于是顶部出现了
|
||||
* 「一条米色状态栏 + 一条白色顶栏」的拼接感，用户体感就是
|
||||
* 「首页距离上面那么远 / 不够沉浸」。
|
||||
* ⇒ 状态栏一律取**顶栏底色**（app.color.surface），两者连成一片。
|
||||
* 底部手势条则取**页面底色**，与页面下部同色。
|
||||
* 🔴 核心手法（照 SyncCalendar 那套，实测最干净）：
|
||||
* **系统栏涂成全透明 `#00000000`**，再让窗口底色 = 页面背景色透出来。
|
||||
* 这样顶部通知栏的颜色天然等于"它下面那一块"的颜色 —— 就是用户要的
|
||||
* 「上面那一块和通知栏完全融为一体」。
|
||||
*
|
||||
* ⚠️ 取色都走 resourceManager（经 dark/ 限定符解析），不硬编码 —— 深色模式下一并生效。
|
||||
* ⚠️ 曾经的做法是把状态栏设成某个具体色（先设页面底色、又改成顶栏底色），
|
||||
* 结果都不对：状态栏是**独立于页面**的一层，给它写死颜色就必然和它下面的
|
||||
* 内容割裂（顶栏是白的、状态栏是米色的，看着就是"没对齐"）。
|
||||
* 透明才是正解 —— 它不需要知道下面是白还是纸色。
|
||||
*
|
||||
* ⚠️ `setWindowBackgroundColor` 对 phone/tablet 会报 unavailable（编译器告警），
|
||||
* 但**这里必须调**：透明系统栏要透出的就是它。告警可忽略（SyncCalendar 同样这么用）。
|
||||
*/
|
||||
private applySystemBars(win: window.Window): void {
|
||||
const surfaceBg: string = this.themeColor($r('app.color.surface').id, '#FFFFFF');
|
||||
const paperBg: string = this.themeColor($r('app.color.page_bg').id, '#F7F3EA');
|
||||
const pageBg: string = this.themeColor($r('app.color.page_bg').id, '#F7F3EA');
|
||||
// 前景（状态栏里的时间/电量）按页面底色亮度取反，深色模式自动变浅色字
|
||||
const fg: string = this.isDarkBg(pageBg) ? '#FFFFFF' : '#2C231D';
|
||||
try {
|
||||
win.setWindowSystemBarProperties({
|
||||
// 顶部：与顶栏同色（白）⇒ 状态栏"融"进顶栏
|
||||
statusBarColor: surfaceBg,
|
||||
statusBarContentColor: this.isDarkBg(surfaceBg) ? '#FFFFFF' : '#2C231D',
|
||||
// 底部：与页面底色同色 ⇒ 手势条不突兀
|
||||
navigationBarColor: paperBg,
|
||||
navigationBarContentColor: this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D'
|
||||
statusBarColor: '#00000000',
|
||||
statusBarContentColor: fg,
|
||||
navigationBarColor: '#00000000',
|
||||
navigationBarContentColor: fg
|
||||
});
|
||||
// 窗口底色 = 页面背景色，供透明系统栏透出
|
||||
win.setWindowBackgroundColor(pageBg);
|
||||
} catch (err) {
|
||||
hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s',
|
||||
JSON.stringify(err));
|
||||
}
|
||||
// ⚠️ 这里**不再调** `win.setWindowBackgroundColor()` —— 该 API 对
|
||||
// phone / tablet 不可用（编译器告警 "This API is unavailable to phone, tablet."），
|
||||
// 而页面自身已经用同色铺满整屏，窗口底色这层是多余的。
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user