v0.5.0 抽屉改「应用内左右滑动」触发 + 去掉汉堡按钮 + 统一区块边距

用户 2026-10-12 三条反馈。

## ① 抽屉改「应用内水平滑动」触发(关键更正)

用户实测指出:「左滑右滑不是从边上滑,而是在应用的内部从左往右滑或者从右往左滑。
如果从边上往里边滑的话,它是系统手势,我们是没有办法去控制它的。」

⇒ **这是之前手势完全没生效的根因**:屏幕边缘是系统手势区(返回/侧边栏),
  从边缘往里滑的事件根本轮不到应用。判据改为「在应用内部水平滑动」:
  · 向右滑 ⇒ 抽屉从左边出;· 向左滑 ⇒ 抽屉从右边出。
  (左手持机往右划、右手持机往左划,单手都顺。)

🔴 同时修掉一个真 bug:**`offsetX` 的单位是 vp**(SDK 原文 "in vp"),
   我之前又除以 density,把位移缩到 1/3 ⇒ 阈值永远达不到。
⚠️ 用 `parallelGesture`(不是 gesture):内容区还有竖向滚动与
   纪念日/财务/任务的横向滚动条,用 gesture 会把它们抢掉。
   阈值 80vp,轻扫横向列表不会误开。

## ② 去掉顶栏汉堡按钮
用户:「那个三个点、三个横线的按钮就不要了,图标靠左,显得更好看一些」。
⇒ TopBar 删掉按钮,`padding.left` 由 14 改为 `pagePad`,图标与下方内容左边线对齐。

## ③ 🔴 统一区块边距(修掉 15 处真 bug)
用户:「页面里的方框大小不一样,有的左右充满,有的有缝隙 —— 最好都留一点距离」。

实测界面树 + 像素采样找到根因:**卡片同时写了 `.width('100%')` 和
`.margin({left, right})` ⇒ width 先把宽度占满、margin 失效,卡片顶到屏幕两侧**。
(首页个人信息卡实测 x=0..1080 满宽,而别的区块是留边 17vp 的。)

全项目扫出 **15 处**同款写法(calendar 3 / days 2 / ledger 2 / movies 1 /
people 2 / settings 5),**全是卡片**(backgroundColor+borderRadius+margin)。
统一删掉那条 `.width('100%')`,宽度交给 margin 撑出。

### 验证(真机)
· 手势:向右滑 ⇒ 抽屉「家书」x=187(贴左);向左滑 ⇒ x=442(贴右)—— 双向 ✓
· 边距:像素级逐行采样,17 行里 15 行左右均 50px(17vp)完全一致;
  另 2 行是"标题文字起点"(文字有额外缩进),不是边距问题 ✓
· 14 页遍历 **14/14**;深验(每页特征文本)**12/12**
· 编译 **0 error / 0 warning**

### 工具链修复(都很关键)
· 🔴 `hdc file recv` 在 **Git Bash** 下会被路径转换改写:`/data/local/tmp/x`
  被当成 `C:/.../tmp/x` ⇒ **静默失败、界面树永远抓不到**。
  三个验证脚本已统一注入 `MSYS_NO_PATHCONV=1`。
· 探针不再点汉堡按钮开抽屉(按钮已删),改用「应用内向右滑」。
· 修探针一处误判:顶栏与抽屉**都有**「家书」,原来没区分 ⇒
  两种滑动都读到顶栏那个固定 x,误报"手势没生效"(其实生效了)。
This commit is contained in:
2026-10-12 11:37:45 +08:00
parent 0816e25988
commit 705a65ae2e
10 changed files with 73 additions and 48 deletions
+8 -24
View File
@@ -7,10 +7,11 @@
* · 顶栏**并入页面滚动流**,向上滑动时跟着内容一起滑走
* (所以它本身不固定、也不自己处理状态栏留白)。
*
* 🔴 与状态栏的关系:顶栏是白色,而系统栏被涂成全透明、透出的是**根容器底色**。
* 所以要让"通知栏与顶栏融为一体",根容器在顶栏这一段必须是白色 ——
* 由 `Index.ets` 在顶部铺一层与顶栏同高的白色块来实现(页面滚动时它不动,
* 保证通知栏区域永远是白的,不会滚出内容)。
* 🔴 **顶栏不放汉堡按钮**(用户 2026-10-12 明确要求去掉):
* 开抽屉改由**屏幕边缘滑动**触发(见 `Drawer.ets` 的 parallelGesture)——
* 从左边缘向右滑 ⇒ 抽屉在左;从右边缘向左滑 ⇒ 抽屉在右。
* ⇒ 图标能一直贴到最左边,视觉上更好看。
* ⚠️ 别再加回汉堡按钮;抽屉的其它入口是「顶栏头像」与「抽屉底部账号区」。
*
* ⚠️ 顶栏**不放**「设置」—— 与 Web 端一致:设置收在抽屉底部的账号区里。
*/
@@ -28,25 +29,7 @@ export struct FbTopBar {
build() {
Row({ space: 10 }) {
// ---- 左:窄屏显示抽屉按钮 ----
if (!this.app.wideLayout) {
Button({ type: ButtonType.Circle }) {
Image(FbIcon.ui('menu'))
.width(18)
.height(18)
.renderMode(ImageRenderMode.Template)
.fillColor(FbColors.ink)
}
.width(36)
.height(36)
.backgroundColor(Color.Transparent)
.stateEffect(true)
.onClick(() => {
this.app.drawerOpen = true;
})
}
// ---- 应用图标 ----
// ---- 应用图标(贴最左:抽屉改由边缘滑动触发,这里不再有汉堡按钮)----
// ⚠️ 必须给描边:logo 是「米色底(74%) + 砖红图案(24%)」的实心方图,
// 放在白色/米色上时底板与背景几乎同色,只剩砖红图案发飘、看不清。
// 一层极浅的描边就能把底板"托"出来(本机范本 SyncCalendar 也给了描边)。
@@ -114,7 +97,8 @@ export struct FbTopBar {
}
.width('100%')
.height(FbMetric.topBarH)
.padding({ left: 14, right: 10, top: 4, bottom: 4 })
// 左内边距=pagePad(与下面各区块的左边线对齐);右侧 10(图标可略贴边)
.padding({ left: FbMetric.pagePad, right: 10, top: 4, bottom: 4 })
.alignItems(VerticalAlign.Center)
// 顶栏底色 = 白色(与下面的个人信息卡同色)
.backgroundColor(FbColors.surface)