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:
@@ -36,28 +36,17 @@ import { FbSettingsPage } from './settings/FbSettingsPage';
|
||||
struct Index {
|
||||
/** 全局状态（抽屉 / 当前模块 / 宽窄屏） */
|
||||
@Local app: FbAppState = fbAppState();
|
||||
/**
|
||||
* 状态栏高度（vp）。
|
||||
*
|
||||
* 🔴 为什么需要它：EntryAbility 调了 `setWindowLayoutFullScreen(true)`，窗口**铺满整屏**
|
||||
* （顶栏背景色一直画到屏幕最上沿，这才是"沉浸"）。
|
||||
* 代价是内容会钻到状态栏底下，所以顶栏必须自己让出这一段高度。
|
||||
*
|
||||
* ⚠️ 曾经这里踩过一个错：那时没开全屏，系统**已经把窗口推到状态栏下方**了，
|
||||
* 我却又加了一个等高的白色 Column「让出安全区」⇒ 重复避让 156px，
|
||||
* 用户看到的就是「首页距离上面那么远」。开全屏之后这一段才真正必要。
|
||||
*/
|
||||
@Local statusBarH: number = 0;
|
||||
/** 底部手势条高度（vp）——同理，全屏后内容会压到手势条上，需要留出 */
|
||||
@Local bottomBarH: number = 0;
|
||||
|
||||
aboutToAppear(): void {
|
||||
this.measureScreen();
|
||||
this.loadWindowInsets();
|
||||
}
|
||||
|
||||
/**
|
||||
* 量屏幕断点（同步，首帧就能用）。
|
||||
*
|
||||
* ⚠️ 这里**只测宽窄屏**。状态栏/手势条高度**不再自己算** ——
|
||||
* 沉浸式改用「系统栏透明 + expandSafeArea」方案后，
|
||||
* 窗口布局不动、系统已把内容排在安全区内，自己再算一遍必然错（踩过）。
|
||||
*/
|
||||
private measureScreen(): void {
|
||||
try {
|
||||
@@ -74,94 +63,32 @@ struct Index {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 取窗口避让区（状态栏 / 手势条高度）。
|
||||
*
|
||||
* ⚠️ 这里走**异步** `window.getLastWindow(ctx)`。
|
||||
* 早先试过「EntryAbility 用 getMainWindowSync 取窗存进 AppStorage，页面侧同步读」——
|
||||
* 实测**读不到**（Store 里存 Window 对象再取回来是不可靠的），结果 statusBarH 恒为 0。
|
||||
* 代价是第一帧还没有避让值（顶栏按 0 让位），拿到后会自动重绘补上，
|
||||
* 视觉上是"顶栏内容往下挪一点点"，可接受。
|
||||
*
|
||||
* ⚠️ 避让值随**旋转 / 折叠**变化，所以同时监听 windowSizeChange 重算。
|
||||
*/
|
||||
private loadWindowInsets(): void {
|
||||
try {
|
||||
const ctx = this.getUIContext().getHostContext();
|
||||
if (ctx === undefined) {
|
||||
return;
|
||||
}
|
||||
window.getLastWindow(ctx)
|
||||
.then((win: window.Window) => {
|
||||
this.applyAvoidAreas(win);
|
||||
// 尺寸变化（旋转、折叠展开/合上、分屏）后重算避让区
|
||||
win.on('windowSizeChange', () => {
|
||||
this.applyAvoidAreas(win);
|
||||
});
|
||||
})
|
||||
.catch((err: BusinessError) => {
|
||||
hilog.warn(0x0000, 'FamilyBook', 'getLastWindow failed: %{public}s',
|
||||
JSON.stringify(err));
|
||||
});
|
||||
} catch (err) {
|
||||
hilog.warn(0x0000, 'FamilyBook', 'loadWindowInsets failed: %{public}s',
|
||||
JSON.stringify(err));
|
||||
}
|
||||
}
|
||||
|
||||
/** 从窗口读出避让区并换算成 vp（两个区各自 try —— 一个失败不该带下水另一个） */
|
||||
private applyAvoidAreas(win: window.Window): void {
|
||||
let density: number = 0;
|
||||
try {
|
||||
density = display.getDefaultDisplaySync().densityPixels;
|
||||
} catch (err) {
|
||||
hilog.warn(0x0000, 'FamilyBook', 'read density failed: %{public}s', JSON.stringify(err));
|
||||
return;
|
||||
}
|
||||
if (density <= 0) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const top: window.AvoidArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
|
||||
this.statusBarH = top.topRect.height / density;
|
||||
} catch (err) {
|
||||
hilog.warn(0x0000, 'FamilyBook', 'status bar inset failed: %{public}s',
|
||||
JSON.stringify(err));
|
||||
}
|
||||
try {
|
||||
const bottom: window.AvoidArea =
|
||||
win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
|
||||
this.bottomBarH = bottom.bottomRect.height / density;
|
||||
} catch (err) {
|
||||
hilog.warn(0x0000, 'FamilyBook', 'nav bar inset failed: %{public}s',
|
||||
JSON.stringify(err));
|
||||
}
|
||||
}
|
||||
|
||||
build() {
|
||||
// 根容器铺满整屏；顶栏/内容各自让出状态栏与手势条 —— 这样顶栏的底色能一直
|
||||
// 顶到屏幕最上沿，状态栏看起来就是「融合」在顶栏里的。
|
||||
Column() {
|
||||
// 主骨架：抽屉 + 内容（内部已含状态栏留白，见 mainArea）
|
||||
Column() {
|
||||
FbDrawerShell({ app: this.app, statusBarH: this.statusBarH }) {
|
||||
this.mainArea()
|
||||
}
|
||||
FbDrawerShell({ app: this.app }) {
|
||||
this.mainArea()
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
// 🔴 沉浸式的全部秘诀在这一句（照 SyncCalendar 的写法）：
|
||||
// `expandSafeArea` 让**根容器的背景**延伸到状态栏/手势条区域，
|
||||
// 但**不移动任何子组件** —— 内容仍在安全区内正常排版，
|
||||
// 只有背景色一路铺到屏幕边缘。
|
||||
// 再配合 EntryAbility 里"系统栏全透明"，顶部通知栏透出的就是这层背景色，
|
||||
// 于是「上面那一块和通知栏完全融为一体」。
|
||||
// ⇒ 不需要手算状态栏高度、不需要给顶栏加 padding，也就不会算错。
|
||||
.backgroundColor(FbColors.paper)
|
||||
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
|
||||
}
|
||||
|
||||
/** 内容区：顶栏 + 当前模块页 */
|
||||
@Builder
|
||||
mainArea() {
|
||||
Column() {
|
||||
// ---- 顶栏：自身含状态栏留白（底色一直画到屏幕顶），所以这里不再单独加间隔 ----
|
||||
FbTopBar({ app: this.app, statusBarH: this.statusBarH }) {
|
||||
// 顶栏：不再需要自己做状态栏留白（背景已由 expandSafeArea 铺到顶，
|
||||
// 内容本身就在安全区内）
|
||||
FbTopBar({ app: this.app }) {
|
||||
}
|
||||
|
||||
// ---- 模块页 ----
|
||||
@@ -170,22 +97,13 @@ struct Index {
|
||||
}
|
||||
.layoutWeight(1)
|
||||
.width('100%')
|
||||
|
||||
// ---- 底部手势条留白：保证内容不被手势条压住 ----
|
||||
// ⚠️ 用页面底色而不是白色 —— 之前用一个白 Column 顶在这儿，
|
||||
// 用户看到的就是「下面也有一条白色的东西」。
|
||||
if (this.bottomBarH > 0) {
|
||||
Column()
|
||||
.width('100%')
|
||||
.height(this.bottomBarH)
|
||||
.backgroundColor(FbColors.paper)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.backgroundColor(FbColors.paper)
|
||||
}
|
||||
|
||||
|
||||
/** 按当前模块渲染对应页面（用 if/else 分发：ArkUI 的 build 里不允许 switch） */
|
||||
@Builder
|
||||
moduleContent() {
|
||||
|
||||
Reference in New Issue
Block a user