/** * 家书 FamilyBook · 主界面(鸿蒙端) * * 骨架:**左侧抽屉 + 右侧内容**,两套形态由窗口短边决定(见 FbAppState.wideLayout): * · 宽屏(平板 / 折叠屏展开 / 横屏手机):抽屉常驻,内容区并排; * · 窄屏:内容铺满,抽屉从左侧滑出(点遮罩或选中模块即收起)。 * * 内容区 = 顶栏 + 当前模块页。此处只做**模块分发**,各模块的版面在各自文件里。 * * ⚠️ 当前全部为**演示数据 / 静态界面**:还没有接口,所有「新建 / 编辑 / 删除」 * 只做入口与样式,不落任何数据。接口到位后只要替换各页面里的数据源即可。 */ import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { BusinessError } from '@kit.BasicServicesKit'; import { FbColors, FbMetric } from '../common/Theme'; import { FbAppState, FB_WIDE_BREAKPOINT, fbAppState } from '../common/Store'; import { FbDrawerShell } from '../components/Drawer'; import { FbTopBar } from '../components/TopBar'; import { FbHomePage } from './home/FbHomePage'; import { FbMoviesPage } from './movies/FbMoviesPage'; import { FbTripsPage } from './trips/FbTripsPage'; import { FbCalendarPage } from './calendar/FbCalendarPage'; import { FbTasksPage } from './tasks/FbTasksPage'; import { FbPeoplePage } from './people/FbPeoplePage'; import { FbResourcesPage } from './resources/FbResourcesPage'; import { FbDaysPage } from './days/FbDaysPage'; import { FbLedgerPage } from './ledger/FbLedgerPage'; import { FbBooksPage } from './books/FbBooksPage'; import { FbNotesPage, FbNotificationsPage } from './misc/FbMiscPages'; import { FbSettingsPage } from './settings/FbSettingsPage'; @Entry @ComponentV2 struct Index { /** 全局状态(抽屉 / 当前模块 / 宽窄屏) */ @Local app: FbAppState = fbAppState(); aboutToAppear(): void { this.measureScreen(); } /** * 量屏幕断点(同步,首帧就能用)。 * * ⚠️ 这里**只测宽窄屏**。状态栏/手势条高度**不再自己算** —— * 沉浸式改用「系统栏透明 + expandSafeArea」方案后, * 窗口布局不动、系统已把内容排在安全区内,自己再算一遍必然错(踩过)。 */ private measureScreen(): void { try { const d: display.Display = display.getDefaultDisplaySync(); const density: number = d.densityPixels; if (density <= 0) { return; } // 宽窄屏:按窗口短边(短边旋转时不变,故比例接近 1:1 的设备横竖屏布局天然一致) const shortSide: number = Math.min(d.width, d.height) / density; this.app.wideLayout = shortSide >= FB_WIDE_BREAKPOINT; } catch (err) { hilog.warn(0x0000, 'FamilyBook', 'measureScreen failed: %{public}s', JSON.stringify(err)); } } build() { Column() { FbDrawerShell({ app: this.app }) { this.mainArea() } } .width('100%') .height('100%') // 🔴 沉浸式的全部秘诀在这一句(照 SyncCalendar 的写法): // `expandSafeArea` 让**根容器的背景**延伸到状态栏/手势条区域, // 但**不移动任何子组件** —— 内容仍在安全区内正常排版, // 只有背景色一路铺到屏幕边缘。 // 再配合 EntryAbility 里"系统栏全透明",顶部通知栏透出的就是这层背景色, // 于是「上面那一块和通知栏完全融为一体」。 // ⇒ 不需要手算状态栏高度、不需要给顶栏加 padding,也就不会算错。 .backgroundColor(FbColors.paper) .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) } /** 内容区:当前模块页(含顶栏 —— 顶栏由页面放进自己的滚动流,见 topBarSlot) */ @Builder mainArea() { Column() { this.moduleContent() } .width('100%') .height('100%') .backgroundColor(FbColors.paper) } /** * 顶栏内容(交给各模块页放进**自己的滚动流最前面** ⇒ 跟着内容一起滚走)。 * * 🔴 用户要求:「向上滑动的时候,标题栏也跟着向上滑动,不需要固定在当前位置」 * ⇒ 顶栏不能再像以前那样摆在滚动容器**外面**(那样它是固定的)。 * 交给页面承载、页面把它放在 Scroll/List 的内容最前面,才会跟着滚。 * * ⚠️ 状态栏由系统直接涂成白色(EntryAbility 里 `statusBarColor = surface`, * 与顶栏同色)。所以顶栏滚走之后,通知栏区域仍由系统保持白色, * 不会露出页面底色 —— 不需要在页面上再铺"白色压条"。 */ @Builder topBarSlot() { FbTopBar({ app: this.app }) { } } /** 按当前模块渲染对应页面(用 if/else 分发:ArkUI 的 build 里不允许 switch) */ @Builder moduleContent() { if (this.app.activeModule === 'home') { FbHomePage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'people' || this.app.activeModule === 'kin') { FbPeoplePage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'movies') { FbMoviesPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'trips') { FbTripsPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'calendar') { FbCalendarPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'tasks') { FbTasksPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'resources') { FbResourcesPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'days') { FbDaysPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'ledger') { FbLedgerPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'books') { FbBooksPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === 'notes') { FbNotesPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === '__notifications') { FbNotificationsPage({ app: this.app, topBar: this.topBarSlot }) } else if (this.app.activeModule === '__settings') { FbSettingsPage({ app: this.app, topBar: this.topBarSlot }) } else { // 兜底:模块还没做页面时给一句提示,而不是白屏 Column({ space: 8 }) { Text('这个模块还没有页面') .fontSize(FbMetric.fontBody) .fontColor(FbColors.muted) Text('当前模块:' + this.app.activeModule) .fontSize(FbMetric.fontTiny) .fontColor(FbColors.faint) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } } }