v0.2.0 沉浸式 + 按手机重排版 + 去掉导航模块
三条用户反馈一次处理完。
## ① 不够沉浸：首页距顶太远 + 底部白条
根因是**重复避让 + 颜色断裂**，两处都是我自己的错：
· 早先没开全屏时，系统已把窗口推到状态栏下方，我却又加了一个等高的白色
Column「让出安全区」⇒ 重复避让，实测顶部空出 156px；
· 状态栏底色被设成「页面底色（宣纸米）」，而顶栏是白色 ⇒ 顶部出现
「米色状态栏 + 白色顶栏」的拼接感，看着就是"没对齐"。
改法：
· EntryAbility 调 setWindowLayoutFullScreen(true)，窗口铺满整屏；
· 状态栏底色一律取**顶栏底色**，底部手势条取**页面底色** —— 各自与紧邻元素同色；
· 页面侧用 getWindowAvoidArea 自己让位（顶栏顶部内边距 = 状态栏高度，
底色一直画到屏幕最上沿）；
· 底部那条全宽白 Column 删掉。
避让值走**异步** window.getLastWindow + windowSizeChange 监听
（早先"Ability 取窗存 AppStorage 再同步读"的做法实测读不到值，恒为 0）；
旋转/折叠后会自动重算。
验证（像素级，非目测）：y=0..200 全为顶栏白（原先 y=0..121 是米色状态条），
底部 y=2224..2444 全为纸色、白条消失。
## ② 去掉「导航」模块
用户原话：「导航是专门为电脑端开发的，都是网站，主要用在浏览器的主页，所以不需要」。
⇒ 删掉 FbNavPage、FbNavLink 类型、FB_DEMO_NAV、fbGroupNav、图标分支与演示数据。
⚠️ 模块清单自此与 Web 端 Module::LIST **有意不等**，注释里写明了别补回去。
## ③ 排版按手机重做（不照搬电脑端）
首页：删掉 hero 招牌整块（它只重复信息面板已有的信息），信息面板升为首块
并改成**无卡片的页面头部**（问候/日期大字、天气右上、三数字贴底）——
套白卡片会在首屏就切出一块白、压缩可用高度，也破坏沉浸感。
卡片从「今天的日程」才开始用，页面层次反而更清楚。
其余按手机重排：观影两列定格（原瀑布流）、任务按状态三段（原多列看板）、
家谱圈层（原折线树）。README 里列了逐项取舍与理由。
## 编译
hvigorw assembleHap --mode module -p product=default --no-daemon
→ BUILD SUCCESSFUL，0 error / 0 warning
This commit is contained in:
@@ -8,7 +8,7 @@ const DOMAIN: number = 0x0000;
|
||||
/**
|
||||
* 家书 · 应用入口。
|
||||
*
|
||||
* 只做三件事：加载主页面、把状态栏/导航条配色对齐主题、跟随系统深浅色重刷。
|
||||
* 只做三件事：加载主页面、开启沉浸式（窗口铺满整屏）、跟随系统深浅色刷系统栏配色。
|
||||
*
|
||||
* ⚠️ 这里**不申请任何权限**（除 module.json5 里已声明的 INTERNET）。
|
||||
* 要权限必须在用户主动点对应功能时再申请 —— 启动即弹窗会被审核驳回。
|
||||
@@ -33,16 +33,26 @@ 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;
|
||||
// 顺手把窗口引用存进 AppStorage：页面侧要在 aboutToAppear 里**同步**读
|
||||
// 避让区（状态栏高度）来铺安全区，而 window.getLastWindow() 只有异步版。
|
||||
|
||||
// 🔴 关键一步：让窗口**铺满整屏**（内容延伸到状态栏 / 手势条区域）。
|
||||
// 不开这个的话，系统会把窗口整体推到状态栏下方 —— 那时如果页面再自己
|
||||
// "让出安全区"，就会**重复避让**（实测 156px 的顶部空白，用户反馈
|
||||
// 「首页距离上面那么远」就是这个原因）。
|
||||
// 开了之后：窗口占满全屏，页面用 getWindowAvoidArea 的高度自己让位，
|
||||
// 于是顶栏底色能一直顶到屏幕最上沿，状态栏看起来是"融"在顶栏里的。
|
||||
win.setWindowLayoutFullScreen(true);
|
||||
|
||||
// 页面侧要在 aboutToAppear 里**同步**读避让区，而 window.getLastWindow()
|
||||
// 只有异步版 ⇒ 由这里存一份窗口引用进 AppStorage。
|
||||
AppStorage.setOrCreate<window.Window>('fbMainWindow', win);
|
||||
|
||||
this.applySystemBars(win);
|
||||
} catch (err) {
|
||||
hilog.error(DOMAIN, 'FamilyBook', 'applySystemBars failed: %{public}s', JSON.stringify(err));
|
||||
hilog.error(DOMAIN, 'FamilyBook', 'immersive setup failed: %{public}s', JSON.stringify(err));
|
||||
}
|
||||
|
||||
windowStage.loadContent('pages/Index', (err) => {
|
||||
@@ -92,18 +102,15 @@ export default class EntryAbility extends UIAbility {
|
||||
}
|
||||
|
||||
/**
|
||||
* 取当前主题下 page_bg 的**真实取值**（经 dark/ 限定符解析）。
|
||||
*
|
||||
* ⚠️ 必须以「资源系统实际解析出的颜色」为准来刷系统栏 ——
|
||||
* 如果直接读 config.colorMode 判断，会在系统切换的那一帧读到旧值，
|
||||
* 结果状态栏与页面背景对不上。
|
||||
* 取某资源色的真实取值（经 dark/ 限定符解析）。以「资源系统实际解析出的颜色」
|
||||
* 为准来刷系统栏 —— 直接按 colorMode 判断会在系统切换的那一帧读到旧值。
|
||||
*/
|
||||
private themePageBg(): string {
|
||||
private themeColor(id: number, fallback: string): string {
|
||||
try {
|
||||
const c: number = this.context.resourceManager.getColorSync($r('app.color.page_bg').id) >>> 0;
|
||||
const c: number = this.context.resourceManager.getColorSync(id) >>> 0;
|
||||
return '#' + c.toString(16).padStart(8, '0');
|
||||
} catch (err) {
|
||||
return '#F7F3EA';
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,16 +130,30 @@ export default class EntryAbility extends UIAbility {
|
||||
return (0.2126 * r + 0.7152 * g + 0.0722 * b) < 128;
|
||||
}
|
||||
|
||||
/** 状态栏/导航条底色 = 页面背景色，前景按亮度取反 —— 视觉上与页面连成一片 */
|
||||
/**
|
||||
* 系统栏配色。
|
||||
*
|
||||
* 🔴 关键：**状态栏底色必须与它紧邻的元素同色**，否则会出现一条割裂的色带。
|
||||
* 实测教训 —— 原先这里把状态栏设为「页面底色（宣纸米 #F7F3EA）」，
|
||||
* 而顶栏是白色 #FFFFFF，于是顶部出现了
|
||||
* 「一条米色状态栏 + 一条白色顶栏」的拼接感，用户体感就是
|
||||
* 「首页距离上面那么远 / 不够沉浸」。
|
||||
* ⇒ 状态栏一律取**顶栏底色**（app.color.surface），两者连成一片。
|
||||
* 底部手势条则取**页面底色**，与页面下部同色。
|
||||
*
|
||||
* ⚠️ 取色都走 resourceManager（经 dark/ 限定符解析），不硬编码 —— 深色模式下一并生效。
|
||||
*/
|
||||
private applySystemBars(win: window.Window): void {
|
||||
const bg: string = this.themePageBg();
|
||||
const fg: string = this.isDarkBg(bg) ? '#FFFFFF' : '#2C231D';
|
||||
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: bg,
|
||||
statusBarContentColor: fg,
|
||||
navigationBarColor: bg,
|
||||
navigationBarContentColor: fg
|
||||
// 顶部：与顶栏同色（白）⇒ 状态栏"融"进顶栏
|
||||
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',
|
||||
@@ -140,7 +161,6 @@ export default class EntryAbility extends UIAbility {
|
||||
}
|
||||
// ⚠️ 这里**不再调** `win.setWindowBackgroundColor()` —— 该 API 对
|
||||
// phone / tablet 不可用（编译器告警 "This API is unavailable to phone, tablet."），
|
||||
// 而页面自身（Index.ets 的安全区 Column）已经用同色铺满整屏，
|
||||
// 窗口底色这层是多余的。留着只会带来一条无意义的告警。
|
||||
// 而页面自身已经用同色铺满整屏，窗口底色这层是多余的。
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user