v0.2.0 沉浸式 + 按手机重排版 + 去掉导航模块
三条用户反馈一次处理完。
## ① 不够沉浸:首页距顶太远 + 底部白条
根因是**重复避让 + 颜色断裂**,两处都是我自己的错:
· 早先没开全屏时,系统已把窗口推到状态栏下方,我却又加了一个等高的白色
Column「让出安全区」⇒ 重复避让,实测顶部空出 156px;
· 状态栏底色被设成「页面底色(宣纸米)」,而顶栏是白色 ⇒ 顶部出现
「米色状态栏 + 白色顶栏」的拼接感,看着就是"没对齐"。
改法:
· EntryAbility 调 setWindowLayoutFullScreen(true),窗口铺满整屏;
· 状态栏底色一律取**顶栏底色**,底部手势条取**页面底色** —— 各自与紧邻元素同色;
· 页面侧用 getWindowAvoidArea 自己让位(顶栏顶部内边距 = 状态栏高度,
底色一直画到屏幕最上沿);
· 底部那条全宽白 Column 删掉。
避让值走**异步** window.getLastWindow + windowSizeChange 监听
(早先"Ability 取窗存 AppStorage 再同步读"的做法实测读不到值,恒为 0);
旋转/折叠后会自动重算。
验证(像素级,非目测):y=0..200 全为顶栏白(原先 y=0..121 是米色状态条),
底部 y=2224..2444 全为纸色、白条消失。
## ② 去掉「导航」模块
用户原话:「导航是专门为电脑端开发的,都是网站,主要用在浏览器的主页,所以不需要」。
⇒ 删掉 FbNavPage、FbNavLink 类型、FB_DEMO_NAV、fbGroupNav、图标分支与演示数据。
⚠️ 模块清单自此与 Web 端 Module::LIST **有意不等**,注释里写明了别补回去。
## ③ 排版按手机重做(不照搬电脑端)
首页:删掉 hero 招牌整块(它只重复信息面板已有的信息),信息面板升为首块
并改成**无卡片的页面头部**(问候/日期大字、天气右上、三数字贴底)——
套白卡片会在首屏就切出一块白、压缩可用高度,也破坏沉浸感。
卡片从「今天的日程」才开始用,页面层次反而更清楚。
其余按手机重排:观影两列定格(原瀑布流)、任务按状态三段(原多列看板)、
家谱圈层(原折线树)。README 里列了逐项取舍与理由。
## 编译
hvigorw assembleHap --mode module -p product=default --no-daemon
→ BUILD SUCCESSFUL,0 error / 0 warning
This commit is contained in:
@@ -28,6 +28,13 @@ export struct FbDrawer {
|
||||
@Param drawerW: number = FbMetric.drawerW;
|
||||
/** 是否以「覆盖层」形态出现(宽屏时为 false = 常驻) */
|
||||
@Param overlayMode: boolean = true;
|
||||
/**
|
||||
* 状态栏高度(vp)。
|
||||
*
|
||||
* 🔴 沉浸式后窗口铺满整屏 ⇒ 抽屉顶部的品牌区会钻到状态栏底下,必须让出这一段。
|
||||
* 覆盖层形态下更要紧 —— 抽屉是贴屏幕顶的,不让位就会和状态栏的时间/信号叠在一起。
|
||||
*/
|
||||
@Param statusBarH: number = 0;
|
||||
/** 覆盖层形态下:点遮罩关闭 */
|
||||
@Event onDismiss: () => void = () => {
|
||||
};
|
||||
@@ -35,17 +42,17 @@ export struct FbDrawer {
|
||||
/** 抽屉里列出的模块(接口接上后由 user_settings('nav_modules') 下发) */
|
||||
@Local items: FbModuleDef[] = fbDefaultNavModules();
|
||||
|
||||
/** 品牌区:这里放阅文风格的书名(家书)+ 家庭名 */
|
||||
/** 品牌区:书名(家书)+ 家庭名 */
|
||||
@Builder
|
||||
brandHeader() {
|
||||
Row({ space: 10 }) {
|
||||
Image($r('app.media.fb_logo'))
|
||||
.width(34)
|
||||
.height(34)
|
||||
.width(32)
|
||||
.height(32)
|
||||
.borderRadius(9)
|
||||
Column({ space: 1 }) {
|
||||
Text('家书')
|
||||
.fontSize(17)
|
||||
.fontSize(16)
|
||||
.fontWeight(FontWeight.Medium)
|
||||
.fontColor(FbColors.ink)
|
||||
.letterSpacing(1)
|
||||
@@ -58,7 +65,8 @@ export struct FbDrawer {
|
||||
.layoutWeight(1)
|
||||
}
|
||||
.width('100%')
|
||||
.padding({ left: 18, right: 12, top: 18, bottom: 14 })
|
||||
// 顶部内边距 = 状态栏高度 + 一点呼吸,保证不压状态栏
|
||||
.padding({ left: 18, right: 12, top: this.statusBarH + 14, bottom: 10 })
|
||||
}
|
||||
|
||||
/** 一个模块行 */
|
||||
@@ -200,6 +208,8 @@ export struct FbDrawer {
|
||||
@ComponentV2
|
||||
export struct FbDrawerShell {
|
||||
@Param app: FbAppState = fbAppState();
|
||||
/** 状态栏高度(vp),透传给抽屉(沉浸式后抽屉顶部要自己让位) */
|
||||
@Param statusBarH: number = 0;
|
||||
/** 内容区(由父组件通过尾随 lambda 传入) */
|
||||
@BuilderParam content: () => void;
|
||||
|
||||
@@ -210,7 +220,8 @@ export struct FbDrawerShell {
|
||||
Row() {
|
||||
FbDrawer({
|
||||
app: this.app,
|
||||
overlayMode: false
|
||||
overlayMode: false,
|
||||
statusBarH: this.statusBarH
|
||||
})
|
||||
Column() {
|
||||
this.content()
|
||||
@@ -242,6 +253,7 @@ export struct FbDrawerShell {
|
||||
FbDrawer({
|
||||
app: this.app,
|
||||
overlayMode: true,
|
||||
statusBarH: this.statusBarH,
|
||||
onDismiss: (): void => {
|
||||
this.app.drawerOpen = false;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user