diff --git a/README.md b/README.md index ccd345d..86b1e02 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ | 已完成 | 说明 | | --- | --- | | 工程骨架 | Stage 模型 + ArkTS / ArkUI，targetSdk 26.0.0 / compatibleSdk 6.1.1(24) | -| 沉浸式 | 窗口铺满整屏，状态栏与顶栏同色融为一体、底部手势条与页面同色 | +| 沉浸式 | 照本机 SyncCalendar 的方案：系统栏全透明 + 根容器 `expandSafeArea`，通知栏与页面**完全同色** | | 左侧抽屉 | 宽屏常驻侧栏 / 窄屏滑出层，两套形态同一组件 | | 12 个模块页面 | 首页、名册、观影、旅程、日程、资源、任务、纪念日、财务、读书、笔记（+ 家谱） | | 附加页面 | 通知消息、个人设置 | @@ -88,6 +88,40 @@ entry/src/main/ets/ ## 设计说明 +### 沉浸式（三件套，缺一不可） + +参考本机另一个应用 **SyncCalendar**（用户指定）的做法： + +1. **系统栏涂成全透明** —— `statusBarColor: '#00000000'`、`navigationBarColor: '#00000000'`； +2. **窗口底色 = 页面底色** —— `win.setWindowBackgroundColor(pageBg)`，供透明系统栏透出； +3. **紧邻系统栏的元素不设自己的背景色** —— 顶栏**不能**有 `backgroundColor`， + 让它透出根容器底色；根容器再 `expandSafeArea([SYSTEM], [TOP, BOTTOM])` + 把背景铺到状态栏区域。 + +原理：透明系统栏透出的是**窗口底色**，而顶栏也透出**同一个**底色 ⇒ 天然同色、 +「通知栏与上方完全融为一体」。内容仍在安全区内，**不需要手算状态栏高度**。 + +⚠️ 常见的两个坑（都踩过）： +- 调 `setWindowLayoutFullScreen(true)` 后子组件会钻到状态栏底下，页面得自己让位， + 极易算错（曾出现顶部重复避让 156px）； +- 给状态栏或顶栏**写死颜色**必然与相邻层割裂（曾出现「米色状态栏 + 白色顶栏」的拼接感）。 + +验证方式：**逐行像素采样**（`_tooling/familybook_immersion_check.py`）。 +判据是「状态栏区颜色 == 顶栏区颜色」，用数字裁定而不是目测 —— +最终实测 `y=0..271` 全为 `#F7F3EA`（纸色），达标。 + +Web 端顶栏是一排横向模块入口，最多放 12 个模块 —— 手机宽度下必然溢出。 +改成左侧抽屉后，竖向排列不受数量限制，还能顺带放下「模块说明 + 主题色」 +这层信息，一眼看清每个模块是干什么的。 + +抽屉有**两套形态**，由窗口短边决定（≥ 600vp 为宽屏）： + +- **宽屏**（平板 / 折叠屏展开 / 横屏手机）：抽屉常驻，与内容并排； +- **窄屏**：内容铺满，抽屉从左侧滑出，点遮罩或选中模块即收起。 + +判据用「短边」而不是「宽度」—— 短边在旋转时不变，所以比例接近 1:1 的设备 +横竖屏布局保持一致。 + ### 为什么是抽屉 Web 端顶栏是一排横向模块入口，最多放 12 个模块 —— 手机宽度下必然溢出。 diff --git a/entry/src/main/ets/common/Theme.ets b/entry/src/main/ets/common/Theme.ets index b7de89d..5a3eeb1 100644 --- a/entry/src/main/ets/common/Theme.ets +++ b/entry/src/main/ets/common/Theme.ets @@ -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; } diff --git a/entry/src/main/ets/components/Drawer.ets b/entry/src/main/ets/components/Drawer.ets index 40953fd..a831111 100644 --- a/entry/src/main/ets/components/Drawer.ets +++ b/entry/src/main/ets/components/Drawer.ets @@ -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; } diff --git a/entry/src/main/ets/components/TopBar.ets b/entry/src/main/ets/components/TopBar.ets index cb52aa1..e71a85d 100644 --- a/entry/src/main/ets/components/TopBar.ets +++ b/entry/src/main/ets/components/TopBar.ets @@ -1,15 +1,15 @@ /** * 家书 FamilyBook · 顶栏（鸿蒙端） * - * 对应 Web 端 `templates/layout.php` 的 `
`，但按手机习惯调整： - * · 左：抽屉按钮（窄屏）／图标（宽屏，此时抽屉常驻，不需要按钮） - * · 中：当前模块名 + 一句副标题 - * · 右：通知铃铛（带未读角标）+ 头像 + * 形态照用户指的本机另一应用（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 { diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index bffcc7d..e8380ea 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -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('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."）， - // 而页面自身已经用同色铺满整屏，窗口底色这层是多余的。 } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index 7f57f09..69745a0 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -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() { diff --git a/entry/src/main/ets/pages/home/FbHomePage.ets b/entry/src/main/ets/pages/home/FbHomePage.ets index bd84fd1..b031197 100644 --- a/entry/src/main/ets/pages/home/FbHomePage.ets +++ b/entry/src/main/ets/pages/home/FbHomePage.ets @@ -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() + ' 个' })