laoyang/FamilyBook_harmonyos
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

v0.4.0 顶栏改白色 + 通知栏同色 + 顶栏随页面滚动

Browse Source 
用户 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。
This commit is contained in:
laoyang
2026-10-12 10:06:55 +08:00
parent d6bda758d8
commit 0816e25988
15 changed files with 1081 additions and 942 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entry/src/main/ets/pages/calendar/FbCalendarPage.ets
+185 -174
View File
@@ -39,6 +39,12 @@ interface FbCalCell {
@ComponentV2
export struct FbCalendarPage {
/**
* 顶栏插槽：由 Index.ets 传入，放在本页滚动流最前面 ⇒ 随页面一起滚走。
* 🔴 用户要求「向上滑动时标题栏跟着一起滑走」。
*/
@BuilderParam topBar: () => void;
@Param app: FbAppState = fbAppState();
/** 模块主题色（日程 = 琥珀） */
@@ -56,191 +62,196 @@ export struct FbCalendarPage {
private weekLabels: string[] = ['一', '二', '三', '四', '五', '六', '日'];
build() {
Column() {
// ---- 页头：月份 + 视图切换 + 新建 + 设置 ----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text(this.showYear.toString() + ' 年 ' + this.showMonth.toString() + ' 月')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(this.visibleBooks().length.toString() + ' 本日历可见 · 本月 '
+ this.monthEventCount().toString() + ' 条')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
Scroll() {
Column() {
this.topBar()
FbPrimaryButton({
label: '新建',
bg: this.accent,
icon: $r('app.media.fb_ic_plus')
})
FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted })
}
.width('100%')
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
.alignItems(VerticalAlign.Center)
Scroll() {
Column({ space: 0 }) {
// ---- 月历卡 ----
Column({ space: 0 }) {
// 月份切换条
Row() {
this.navBtn('上一月', -1)
Blank()
Text('今天')
.fontSize(FbMetric.fontSmall)
.fontColor(this.accent)
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
.backgroundColor(fbPalette(this.accent).brand + '14')
.borderRadius(FbMetric.radiusPill)
.onClick(() => {
const d: Date = new Date();
this.showYear = d.getFullYear();
this.showMonth = d.getMonth() + 1;
this.pickedDay = d.getDate();
})
Blank()
this.navBtn('下一月', 1)
}
.width('100%')
.padding({ bottom: 10 })
// 星期表头
Row() {
ForEach(this.weekLabels, (w: string) => {
Text(w)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.layoutWeight(1)
.textAlign(TextAlign.Center)
}, (w: string): string => 'wk_' + w)
}
.width('100%')
.padding({ bottom: 6 })
// 日期网格（7 列）
Grid() {
ForEach(this.cells(), (c: FbCalCell) => {
GridItem() {
this.dayCell(c)
}
}, (c: FbCalCell): string => 'cell_' + c.day.toString() + '_'
+ (c.inMonth ? '1' : '0'))
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
.rowsGap(2)
.width('100%')
.height(this.gridHeight())
.scrollBar(BarState.Off)
// ---- 页头：月份 + 视图切换 + 新建 + 设置 ----
Row({ space: 8 }) {
Column({ space: 2 }) {
Text(this.showYear.toString() + ' 年 ' + this.showMonth.toString() + ' 月')
.fontSize(FbMetric.fontTitle)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Text(this.visibleBooks().length.toString() + ' 本日历可见 · 本月 '
+ this.monthEventCount().toString() + ' 条')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.width('100%')
.padding(FbMetric.cardPad)
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad })
// ---- 日历本（可见的几本，横向排列当作图例）----
Column({ space: 10 }) {
Row({ space: 8 }) {
ForEach(this.visibleBooks(), (b: FbCalBook) => {
Row({ space: 5 }) {
FbDot({ dia: 7, fillC: b.color })
Text(b.name)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.maxLines(1)
}
.padding({ right: 10 })
}, (b: FbCalBook): string => 'book_' + b.id.toString())
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 12 })
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
// ---- 选中日的日程 ----
Column({ space: 0 }) {
Row() {
Text(this.pickedDay.toString() + ' 日')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Blank()
Text(this.todayEvents.length.toString() + ' 条日程')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.width('100%')
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
Column({ space: 0 }) {
if (this.todayEvents.length === 0) {
FbEmptyBox({
title: '这天没有安排',
hint: '在月历里点一下某天，就能在那天加日程',
icon: $r('app.media.fb_ic_calendar')
})
} else {
ForEach(this.todayEvents, (ev: FbCalEvent, idx: number) => {
this.eventRow(ev, idx === this.todayEvents.length - 1)
}, (ev: FbCalEvent): string => 'cev_' + ev.id.toString())
}
}
.width('100%')
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
}
.width('100%')
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
// ---- 未来七天 ----
Column({ space: 0 }) {
Row() {
Text('未来七天')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Blank()
Text('共 ' + this.soonEvents.length.toString() + ' 条')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.width('100%')
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
Column({ space: 0 }) {
ForEach(this.soonEvents, (ev: FbCalEvent, idx: number) => {
this.eventRow(ev, idx === this.soonEvents.length - 1)
}, (ev: FbCalEvent): string => 'sev_' + ev.id.toString())
}
.width('100%')
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
}
.width('100%')
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 })
FbPrimaryButton({
label: '新建',
bg: this.accent,
icon: $r('app.media.fb_ic_plus')
})
FbIconButton({ icon: $r('app.media.fb_ic_gear'), tint: FbColors.muted })
}
.width('100%')
.padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 8 })
.alignItems(VerticalAlign.Center)
Scroll() {
Column({ space: 0 }) {
// ---- 月历卡 ----
Column({ space: 0 }) {
// 月份切换条
Row() {
this.navBtn('上一月', -1)
Blank()
Text('今天')
.fontSize(FbMetric.fontSmall)
.fontColor(this.accent)
.padding({ left: 12, right: 12, top: 5, bottom: 5 })
.backgroundColor(fbPalette(this.accent).brand + '14')
.borderRadius(FbMetric.radiusPill)
.onClick(() => {
const d: Date = new Date();
this.showYear = d.getFullYear();
this.showMonth = d.getMonth() + 1;
this.pickedDay = d.getDate();
})
Blank()
this.navBtn('下一月', 1)
}
.width('100%')
.padding({ bottom: 10 })
// 星期表头
Row() {
ForEach(this.weekLabels, (w: string) => {
Text(w)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
.layoutWeight(1)
.textAlign(TextAlign.Center)
}, (w: string): string => 'wk_' + w)
}
.width('100%')
.padding({ bottom: 6 })
// 日期网格（7 列）
Grid() {
ForEach(this.cells(), (c: FbCalCell) => {
GridItem() {
this.dayCell(c)
}
}, (c: FbCalCell): string => 'cell_' + c.day.toString() + '_'
+ (c.inMonth ? '1' : '0'))
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
.rowsGap(2)
.width('100%')
.height(this.gridHeight())
.scrollBar(BarState.Off)
}
.width('100%')
.padding(FbMetric.cardPad)
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad })
// ---- 日历本（可见的几本，横向排列当作图例）----
Column({ space: 10 }) {
Row({ space: 8 }) {
ForEach(this.visibleBooks(), (b: FbCalBook) => {
Row({ space: 5 }) {
FbDot({ dia: 7, fillC: b.color })
Text(b.name)
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.muted)
.maxLines(1)
}
.padding({ right: 10 })
}, (b: FbCalBook): string => 'book_' + b.id.toString())
}
.width('100%')
.alignItems(VerticalAlign.Center)
}
.width('100%')
.padding({ left: FbMetric.pagePad + 4, right: FbMetric.pagePad + 4, top: 12 })
.alignItems(HorizontalAlign.Start)
// ---- 选中日的日程 ----
Column({ space: 0 }) {
Row() {
Text(this.pickedDay.toString() + ' 日')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Blank()
Text(this.todayEvents.length.toString() + ' 条日程')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.width('100%')
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
Column({ space: 0 }) {
if (this.todayEvents.length === 0) {
FbEmptyBox({
title: '这天没有安排',
hint: '在月历里点一下某天，就能在那天加日程',
icon: $r('app.media.fb_ic_calendar')
})
} else {
ForEach(this.todayEvents, (ev: FbCalEvent, idx: number) => {
this.eventRow(ev, idx === this.todayEvents.length - 1)
}, (ev: FbCalEvent): string => 'cev_' + ev.id.toString())
}
}
.width('100%')
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
}
.width('100%')
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12 })
// ---- 未来七天 ----
Column({ space: 0 }) {
Row() {
Text('未来七天')
.fontSize(FbMetric.fontSmall)
.fontWeight(FontWeight.Medium)
.fontColor(FbColors.ink)
Blank()
Text('共 ' + this.soonEvents.length.toString() + ' 条')
.fontSize(FbMetric.fontTiny)
.fontColor(FbColors.faint)
}
.width('100%')
.padding({ left: 4, right: 4, top: 12, bottom: 8 })
Column({ space: 0 }) {
ForEach(this.soonEvents, (ev: FbCalEvent, idx: number) => {
this.eventRow(ev, idx === this.soonEvents.length - 1)
}, (ev: FbCalEvent): string => 'sev_' + ev.id.toString())
}
.width('100%')
.padding({ left: FbMetric.cardPad, right: FbMetric.cardPad, bottom: 6 })
}
.width('100%')
.backgroundColor(FbColors.surface)
.borderRadius(FbMetric.radius)
.margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 12, bottom: 28 })
}
.width('100%')
}
.width('100%')
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.align(Alignment.TopStart)
}
.layoutWeight(1)
.width('100%')
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.align(Alignment.TopStart)
}
.width('100%')
.height('100%')
.backgroundColor(FbColors.paper)
.alignItems(HorizontalAlign.Start)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.align(Alignment.TopStart)
}
/** 上一月 / 下一月按钮 */