Files
FamilyBook_harmonyos/entry/src/main/ets/entryability/EntryAbility.ets
T
laoyang 0816e25988 v0.4.0 顶栏改白色 + 通知栏同色 + 顶栏随页面滚动
用户 08:56 的三条要求:
  1. 家书标题栏用浅色(下面色块的背景色);
  2. 上面通知栏也是浅色,两者融为一体;
  3. 向上滑动时标题栏跟着向上滑,不固定在原位。
(追问确认:顶栏底色 = 白;「品牌条 + 页面标题条」一起随滚动消失。)

## ① 系统栏改「不透明 + 与顶栏同色」,弃用透明方案
原来走「系统栏全透明 + 让紧邻元素透出同底色」。这版顶栏要用白色,
若仍走透明方案就得再造一层"白色压条"去刷白状态栏,太绕。
⇒ 直接 `statusBarColor = surface`(白)、`navigationBarColor = page_bg`(纸色)。
这是**配置出来的同色**,比"指望紧邻元素恰好同色"稳得多(后者顶栏一改底色就出色带)。
副产品:不再需要 `setWindowBackgroundColor` ⇒ 连那条 unavailable 告警也消失,
编译回到 **0 error / 0 warning**。

## ② 顶栏随滚动:整页包进 Scroll,顶栏作为内容第一个元素
原来 `Column { 页头; List/Grid(layoutWeight 1) }` —— 顶栏在滚动区**外面**,
所以固定不动。改为 `Scroll { Column { this.topBar(); 页头; 列表 } }`。
顶栏由 Index 以 `@BuilderParam topBar` 插槽下发(`topBarSlot`),13 个页面全部接入。

⚠️ 同步必须处理的两点:
· 列表的 `.layoutWeight(1)` 要删 —— Scroll>Column 里高度由内容决定,
  layoutWeight 会去分"剩余空间"(=0) ⇒ 列表塌成 0 高、整页只剩顶栏和页头;
· List/Grid 不能自己再滚动(去 scrollBar/edgeEffect)—— 两层滚动容器会抢手势。
⚠️ ArkUI 限制:带尾随 lambda 的组件只能有 1 个 `@BuilderParam`
(首页原有闲置的 topActions 已删)。

## ③ 顶栏白色 + logo 可辨认
logo 是「米色底(74%) + 砖红图案(24%)」的实心方图,放在米色上底板隐形、
只剩图案发飘(用户说"看不清")。今加一层极浅描边把底板"托"出来。
顶栏高度 56→48vp。

## 验证(真机,全部通过)
· 沉浸式:状态栏色 `#FFFFFF` == 顶栏色 `#FFFFFF` ✓
· 顶栏随滚动:「家书」标题 y=140 → 滑动后**已滚出可视区** ✓
· 顶栏滚走后状态栏仍为 `#FFFFFF`(未露出页面内容)✓
· 14 个页面遍历 **14/14**;深验(每页特征文本)**12/12**
· 编译 **0 error / 0 warning**

## 过程记录:批量改 12 个文件失败两次(已回滚重做)
第 1 版按缩进正则切分 ⇒ 闭合括号错乱;第 2 版跳字符时**没消费 Column 的
修饰符链** ⇒ 吃掉 `@Builder` 声明、**636 个报错**。
第 3 版改为**按行 + 括号深度解析**,且**改完立刻做结构断言**
(括号配平、`this.topBar()` 恰好 +1),不满足就不写入;先单页试跑再推广。
教训:批量改多文件时正则不可靠,必须配结构自检 + 单页试点。

配套修掉 `_tooling/familybook_harmonyos_run.sh` 一个"假成功":
`hdc list targets` 无设备时输出字面量 `[Empty]`,原来"非空即通过"
⇒ 拿 `[Empty]` 当序列号去装、还打印「✓ 设备:[Empty]」。已显式排除并 die。
2026-10-12 10:06:55 +08:00

159 lines
6.5 KiB
Plaintext

import { AbilityConstant, Configuration, ConfigurationConstant, EnvironmentCallback,
UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
const DOMAIN: number = 0x0000;
/**
* 家书 · 应用入口。
*
* 只做三件事:加载主页面、开启沉浸式(窗口铺满整屏)、跟随系统深浅色刷系统栏配色。
*
* ⚠️ 这里**不申请任何权限**(除 module.json5 里已声明的 INTERNET)。
* 要权限必须在用户主动点对应功能时再申请 —— 启动即弹窗会被审核驳回。
*/
export default class EntryAbility extends UIAbility {
private mainWindow?: window.Window;
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onCreate');
}
onDestroy(): void {
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onDestroy');
}
onWindowStageCreate(windowStage: window.WindowStage): void {
// ① 先跟随系统深浅色。必须在取窗口之前调用,否则会读到尚未更新的色彩配置。
try {
this.context.getApplicationContext()
.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
} catch (err) {
hilog.error(DOMAIN, 'FamilyBook', 'setColorMode failed: %{public}s', JSON.stringify(err));
}
// ② 沉浸式:系统栏**全透明**,让应用自己的背景透上去。
try {
const win: window.Window = windowStage.getMainWindowSync();
this.mainWindow = win;
// ⚠️ 这里**不调** `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));
}
windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(DOMAIN, 'FamilyBook', 'loadContent failed: %{public}s', JSON.stringify(err));
return;
}
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'loadContent succeeded');
});
// ③ 系统深浅色切换时重刷系统栏配色。
// 用 applicationContext 的 environment 回调比 onConfigurationUpdate 更可靠
// (后者在部分场景不回调,会出现「页面已变深色但状态栏还是浅色」)。
try {
const cb: EnvironmentCallback = {
onConfigurationUpdated: (config: Configuration): void => {
if (this.mainWindow !== undefined) {
this.applySystemBars(this.mainWindow);
}
},
onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {
}
};
this.context.getApplicationContext().on('environment', cb);
} catch (err) {
hilog.error(DOMAIN, 'FamilyBook', 'watch environment failed: %{public}s', JSON.stringify(err));
}
}
/** 兜底:部分设备/场景只回调 UIAbility.onConfigurationUpdate */
onConfigurationUpdate(): void {
if (this.mainWindow !== undefined) {
this.applySystemBars(this.mainWindow);
}
}
onWindowStageDestroy(): void {
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onWindowStageDestroy');
}
onForeground(): void {
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onForeground');
}
onBackground(): void {
hilog.info(DOMAIN, 'FamilyBook', '%{public}s', 'Ability onBackground');
}
/**
* 取某资源色的真实取值(经 dark/ 限定符解析)。以「资源系统实际解析出的颜色」
* 为准来刷系统栏 —— 直接按 colorMode 判断会在系统切换的那一帧读到旧值。
*/
private themeColor(id: number, fallback: string): string {
try {
const c: number = this.context.resourceManager.getColorSync(id) >>> 0;
return '#' + c.toString(16).padStart(8, '0');
} catch (err) {
return fallback;
}
}
/** 按背景亮度决定系统栏前景色(浅底用深字,深底用浅字) */
private isDarkBg(bg: string): boolean {
const s: string = bg.startsWith('#') ? bg.substring(1) : bg;
if (s.length < 6) {
return false;
}
const off: number = s.length >= 8 ? 2 : 0;
const r: number = parseInt(s.substring(off, off + 2), 16);
const g: number = parseInt(s.substring(off + 2, off + 4), 16);
const b: number = parseInt(s.substring(off + 4, off + 6), 16);
if (isNaN(r) || isNaN(g) || isNaN(b)) {
return false;
}
return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 128;
}
/**
* 系统栏配色。
*
* 用户 2026-10-12 定的要求:
* ① 家书标题栏用**浅色(白)**;
* ② 上面通知栏也是**浅色**,两者融为一体。
*
* ⇒ 做法:把状态栏设成与顶栏**同一个颜色**(`surface` = 白)。
* 这是一个"配置出来的"同色,比"让系统栏透明、再指望紧邻元素恰好同色"稳得多 ——
* 后者一旦顶栏改了底色就会立刻出现色带(已经踩过一次)。
*
* ⚠️ 底部导航条取**页面底色**(宣纸米),与页面下部同色,不突兀。
* ⚠️ 取色走 resourceManager(经 dark/ 限定符解析)—— 深色模式一并生效。
*/
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');
try {
win.setWindowSystemBarProperties({
// 顶部:与顶栏同色(白)⇒ 通知栏与标题栏融为一体
statusBarColor: surfaceBg,
statusBarContentColor: this.isDarkBg(surfaceBg) ? '#FFFFFF' : '#2C231D',
// 底部:与页面底色同色
navigationBarColor: paperBg,
navigationBarContentColor: this.isDarkBg(paperBg) ? '#FFFFFF' : '#2C231D'
});
} catch (err) {
hilog.error(DOMAIN, 'FamilyBook', 'setSystemBarProperties failed: %{public}s',
JSON.stringify(err));
}
}
}