 laoyang
|
7eaa641437
|
v0.6.0 图标改为开抽屉入口 + 新增底部悬浮快捷栏（照鸿蒙 6 悬浮导航规范）
用户 2026-10-12 三条要求。
## ① 点顶栏图标 = 开抽屉
用户：「把那个图标改成这个功能吧，就是当用户点击左上角那个图标的时候，把抽屉列出来」。
⇒ `TopBar` 的 logo 加 `.onClick { drawerOpen = true }`。
⚠️ 点击直接挂在 Image 上、**不套 Button** —— Button 自带最小尺寸与内边距，
会把图标挤离左边线（用户要"图标靠左"）。
⇒ 开抽屉现有三个入口：点图标 / 应用内水平滑动 / 底部悬浮栏。
## ② 底部悬浮快捷栏 FbFloatDock（新增）
用户：「页面正下方设置几个浮动按钮…比如日程、名册、任务和笔记…
这样用户不用拉抽屉，就可以直接点击使用。
但一定要注意，使用浮动的方式，**不要固定在下面**，而是**浮动着的**。」
🔴 **形态照鸿蒙 6 官方设计规范的「悬浮导航（Float Navigation）」**：
「导航栏脱离底部边界，以**四周留白、圆角卡片**形态悬浮于内容之上」。
参考实现参数直接用上：`height(56) + margin({left:16,right:16,bottom:16})
+ borderRadius(28)`，材质用系统沉浸材质
`uiMaterial.ImmersiveMaterial({ style: ULTRA_THIN })`（设计规范的"超薄"档）。
⚠️ 用了 systemMaterial 就不再叠加 backgroundBlurStyle/backgroundColor ——
材质自带模糊+边框+阴影，叠加会双重模糊发灰。
⚠️ **摆法关键**：`Index` 的根容器从 `Column` 改成
`Stack({ alignContent: Bottom })` —— 写在 Column 里它就是"占一行的固定底栏"
（老样式）；用 Stack 覆盖 ⇒ 内容从它下面穿过、它浮在上面。
（实测印证：栏体 y=2132..2307，而"我的家人"标题在 y=2336 仍可见 ⇒ 内容穿过去了。）
⚠️ 内容底部加 `FB_DOCK_RESERVE`(88vp) 预留，否则最后一屏内容会被悬浮栏压住。
12 个页面统一处理。
⚠️ 宽屏不显示（抽屉常驻，且屏宽用不上）；抽屉展开时也不显示（避免浮层叠浮层）。
⚠️ 选中项用模块主题色高亮，用户一眼知道"我在哪"。
## 验证（真机，全部通过）
· 点顶栏图标 ⇒ 抽屉打开 ✓
· 点悬浮栏「任务」⇒ 切到任务页 ✓；点「日程」⇒ 切到日程页 ✓
· 悬浮栏几何：栏体 x=21..1060、y=2132..2307（高 58vp），
栏外 x=0..20 为纸色 ⇒ **四周留白** 符合规范 ✓
· 栏内呈半透材质色(#EFEBE2) ⇒ `ImmersiveMaterial` 生效 ✓
· 14 页遍历 **14/14**；深验 **12/12**；编译 **0 error / 0 warning**
## 过程中的一个坑
给 12 个页面补 `FB_DOCK_RESERVE` 的 import 时，脚本统一写成
`'../components/FloatDock'` —— 但**页面在 `pages/<模块>/` 下，需要 `../../`**
（`Index.ets` 在 `pages/` 下才是 `../`）。批量改 import 路径要按**文件深度**区分。
|
2026-10-12 12:06:00 +08:00 |
|