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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user