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:
@@ -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