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:
@@ -72,8 +72,9 @@ export class FbMetric {
|
||||
/** 页面大标题 */
|
||||
static readonly fontH1: number = 24;
|
||||
|
||||
/** 顶栏高度 */
|
||||
static readonly topBarH: number = 56;
|
||||
/** 顶栏高度 —— 用户要求「图标和标题尽量靠上」，所以压到 48vp（常规是 56）。
|
||||
* 顶栏下面的内容因此整体上移，首屏能多看到一行。 */
|
||||
static readonly topBarH: number = 48;
|
||||
/** 抽屉宽度 */
|
||||
static readonly drawerW: number = 264;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
/**
|
||||
* 家书 FamilyBook · 顶栏（鸿蒙端）
|
||||
*
|
||||
* 对应 Web 端 `templates/layout.php` 的 `<header class="topbar">`，但按手机习惯调整：
|
||||
* · 左：抽屉按钮（窄屏）／图标（宽屏，此时抽屉常驻，不需要按钮）
|
||||
* · 中：当前模块名 + 一句副标题
|
||||
* · 右：通知铃铛（带未读角标）+ 头像
|
||||
* 形态照用户指的本机另一应用（SyncCalendar）：
|
||||
* **应用图标 + 标题贴左上，右侧放通知/头像** —— 就是一个普通 Row，
|
||||
* **自己不做任何状态栏留白**。
|
||||
*
|
||||
* 🔴 沉浸式要点：应用开了 `setWindowLayoutFullScreen(true)`，顶栏**一直画到屏幕最上沿**，
|
||||
* 状态栏那一段用 `statusBarH` 内边距让出来。这样顶栏的底色与状态栏连成一片，
|
||||
* 视觉上就是「顶栏顶天」—— 这是"沉浸"的关键，也是之前那个
|
||||
* 「首页距离上面那么远」的根治办法（那时是重复避让）。
|
||||
* 🔴 沉浸式靠两层配合，顶栏本身不参与：
|
||||
* ① EntryAbility：系统栏涂成全透明（`#00000000`）；
|
||||
* ② 根容器：`expandSafeArea` 让背景铺到状态栏区域。
|
||||
* 于是「顶栏上方那一块」（其实是根容器背景）与通知栏完全融为一体，
|
||||
* 而顶栏内容本身就在安全区内、位置不动 —— 不用算状态栏高度，也就不会算错。
|
||||
*
|
||||
* ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致：设置收在抽屉底部的账号区里，
|
||||
* 顶栏只留日常入口，再把管理入口顶出来会把顶栏挤满。
|
||||
@@ -23,8 +23,6 @@ import { FbAvatar } from './Widgets';
|
||||
@ComponentV2
|
||||
export struct FbTopBar {
|
||||
@Param app: FbAppState = fbAppState();
|
||||
/** 状态栏高度（vp）—— 由 Index 量出来传进来，顶栏用它做顶部内边距 */
|
||||
@Param statusBarH: number = 0;
|
||||
/** 右侧额外操作（各模块页自己往里塞「新建」「搜索」等按钮） */
|
||||
@BuilderParam actions: () => void;
|
||||
|
||||
@@ -46,21 +44,27 @@ export struct FbTopBar {
|
||||
.onClick(() => {
|
||||
this.app.drawerOpen = true;
|
||||
})
|
||||
} else {
|
||||
Image($r('app.media.fb_logo'))
|
||||
.width(28)
|
||||
.height(28)
|
||||
.borderRadius(8)
|
||||
}
|
||||
|
||||
// ---- 中：当前模块名 ----
|
||||
// ---- 应用图标 + 标题（贴左，与抽屉里的品牌区同款，一眼认出是"家书"）----
|
||||
Image($r('app.media.fb_logo'))
|
||||
.width(30)
|
||||
.height(30)
|
||||
.borderRadius(8)
|
||||
.flexShrink(0)
|
||||
|
||||
Column({ space: 0 }) {
|
||||
Text(this.moduleName())
|
||||
.fontSize(17)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
Text('家书')
|
||||
.fontSize(19)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.fontColor(FbColors.ink)
|
||||
.maxLines(1)
|
||||
.textOverflow({ overflow: TextOverflow.Ellipsis })
|
||||
// 副标题显示当前模块名 —— 这样"品牌 + 当前位置"一行说清，
|
||||
// 也省掉原来那个只写模块名的孤零零标题
|
||||
Text(this.moduleName())
|
||||
.fontSize(FbMetric.fontTiny)
|
||||
.fontColor(FbColors.faint)
|
||||
.maxLines(1)
|
||||
}
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
.layoutWeight(1)
|
||||
@@ -106,11 +110,18 @@ export struct FbTopBar {
|
||||
.margin({ left: 2 })
|
||||
}
|
||||
.width('100%')
|
||||
// 沉浸式：顶部内边距 = 状态栏高度，底色一直画到屏幕最上沿
|
||||
.padding({ top: this.statusBarH, left: 8, right: 10 })
|
||||
.height(FbMetric.topBarH + this.statusBarH)
|
||||
.alignItems(VerticalAlign.Bottom)
|
||||
.backgroundColor(FbColors.surface)
|
||||
.height(FbMetric.topBarH)
|
||||
// 左右留 14；上下尽量薄（顶栏默认贴状态栏下方，不留额外空隙）
|
||||
.padding({ left: 14, right: 10, top: 4, bottom: 4 })
|
||||
.alignItems(VerticalAlign.Center)
|
||||
// 🔴 **不设 backgroundColor** —— 这是"融为一体"的最后一块拼图。
|
||||
// 顶栏没设背景时，它透出的是根容器的底色（page_bg，宣纸米）；
|
||||
// 而状态栏被涂成全透明、透出的也是根容器底色 ⇒ 两者**天然同色**。
|
||||
//
|
||||
// ⚠️ 之前给顶栏设了 `FbColors.surface`（白色），于是变成
|
||||
// 「状态栏（米色）+ 顶栏（白色）」上下拼接 —— 正是用户说的"没融为一体"。
|
||||
// 本机范本 SyncCalendar 的 header() 也**没有 backgroundColor**，就是这个道理。
|
||||
// 教训：想与系统栏同色，就别给紧邻元素单独上色，让它透出共同底色。
|
||||
}
|
||||
|
||||
private moduleName(): string {
|
||||
|
||||
@@ -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."），
|
||||
// 而页面自身已经用同色铺满整屏，窗口底色这层是多余的。
|
||||
}
|
||||
}
|
||||
@@ -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() {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
* 对应 Web 端 `templates/home.php`。版面照搬它的三段：
|
||||
* ① hero（家庭名 + 格言 + 我的资料/家谱两个快捷入口）
|
||||
* ② 信息面板（问候 + 日期/星期/农历 + 日子标记 ｜ 右侧天气）
|
||||
* ③ 今天的日程 + 近期任务（两块并排；窄屏上下堆叠）
|
||||
* ② 今天的日程 + 近期任务（两块并排；窄屏上下堆叠）
|
||||
* ④ 「往年的今天」回忆条
|
||||
* ⑤ 模块入口卡片（12 个模块的关键数字）
|
||||
*
|
||||
@@ -73,11 +73,12 @@ export struct FbHomePage {
|
||||
Scroll() {
|
||||
Column({ space: 0 }) {
|
||||
|
||||
// ==================== ① 头部（问候 + 今天 + 天气）====================
|
||||
// 🔴 手机端排版要点：这一块**不套白卡片**，直接铺在纸底上 ——
|
||||
// 它是"页面头部"而不是"一张内容卡"。套上卡片会在第一屏就切出一块白，
|
||||
// 既压缩了首屏可用高度，也破坏了沉浸感（用户反馈「不够沉浸」）。
|
||||
// 卡片从下面的「今天的日程」才开始用，页面层次反而更清楚。
|
||||
// ==================== ① 个人信息卡（问候 + 今天 + 天气）====================
|
||||
// 🔴 用户 2026-10-12 定的：这一块**要白色卡片**（"这样显得好看"）。
|
||||
// ⚠️ 曾一度做成"不套卡片的页面头部"，理由是省首屏高度；
|
||||
// 用户看了实机后仍要求套白卡 ⇒ **以用户观感为准**，别再改回去。
|
||||
// 注意与顶栏的区别：顶栏**不能**有自己的背景色（否则与状态栏割裂），
|
||||
// 而这张卡在顶栏**下面**、与状态栏不相邻，套白卡没有这个问题。
|
||||
Column({ space: 10 }) {
|
||||
// 第一行：问候 + 名字（左） / 温度（右）
|
||||
Row() {
|
||||
@@ -151,8 +152,9 @@ export struct FbHomePage {
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
|
||||
// 第三行：三个数字（未来七天日程 / 待办 / 逾期）——
|
||||
// 贴在头部末尾，作为"今天要不要操心的快速判断"
|
||||
Divider().color(FbColors.line2).margin({ top: 2 })
|
||||
// 贴在卡片底部，作为"今天要不要操心的快速判断"
|
||||
// （卡片内用浅分隔线分开，视觉上比留白更"有层次"）
|
||||
Divider().color(FbColors.line2)
|
||||
FbStatTriple({
|
||||
labelA: '未来七天',
|
||||
valueA: FB_DEMO_WEEK_STAT.events.toString(),
|
||||
@@ -164,15 +166,18 @@ export struct FbHomePage {
|
||||
})
|
||||
}
|
||||
.width('100%')
|
||||
.padding({
|
||||
.padding(FbMetric.cardPad)
|
||||
// 白色卡片（用户要求）：与下面「今天的日程」等块同一种卡片语言
|
||||
.backgroundColor(FbColors.surface)
|
||||
.borderRadius(FbMetric.radius)
|
||||
.margin({
|
||||
left: FbMetric.pagePad,
|
||||
right: FbMetric.pagePad,
|
||||
top: 14,
|
||||
bottom: 4
|
||||
top: 8
|
||||
})
|
||||
.alignItems(HorizontalAlign.Start)
|
||||
|
||||
// ==================== ③ 今天的日程 + 近期任务 ====================
|
||||
// ==================== ② 今天的日程 + 近期任务 ====================
|
||||
Column({ space: 0 }) {
|
||||
FbSectionTitle({ title: '今天的日程', extra: this.todayEvents.length.toString() + ' 条' })
|
||||
Column({ space: 10 }) {
|
||||
@@ -257,7 +262,7 @@ export struct FbHomePage {
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
|
||||
|
||||
// ==================== ④ 我的家人 ====================
|
||||
// ==================== ③ 我的家人 ====================
|
||||
Column({ space: 0 }) {
|
||||
FbSectionTitle({ title: '我的家人', extra: '以我为中心 · 上下三代' })
|
||||
Flex({ wrap: FlexWrap.Wrap }) {
|
||||
@@ -285,7 +290,7 @@ export struct FbHomePage {
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
|
||||
|
||||
// ==================== ⑤ 未来七天 ====================
|
||||
// ==================== ④ 未来七天 ====================
|
||||
Column({ space: 0 }) {
|
||||
FbSectionTitle({ title: '未来七天', extra: this.soonEvents.length.toString() + ' 条' })
|
||||
Column({ space: 10 }) {
|
||||
@@ -319,7 +324,7 @@ export struct FbHomePage {
|
||||
.width('100%')
|
||||
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
|
||||
|
||||
// ==================== ⑥ 模块入口 ====================
|
||||
// ==================== ⑤ 模块入口 ====================
|
||||
Column({ space: 0 }) {
|
||||
FbSectionTitle({ title: '全部模块', extra: this.cards.length.toString() + ' 个' })
|
||||
|
||||
|
||||
Reference in New Issue
Block a user