fix(harmony): 悬浮加号移进 Navigation 列表侧,修详情页叠按钮
症状(2026-09-17 模拟器截图硬证):窄屏 Stack 模式点开邮件详情,右下角**同时**
出现两个圆形按钮 —— 详情自己的「回复」(蓝色胶囊)与外壳的 compose 加号,
后者悬空压在详情上。
根因:加号原先是 `Navigation` 的**兄弟**,平级放在外层 Stack 里。
详情画在 `Navigation` 内部,而兄弟节点画在 `Navigation` 之上 ⇒ 永远压住详情。
WebUI 的对应物是 `.comm-pane`(`App.tsx`: `{listBody}<ComposeFab />`):
加号在**列表窗格内部**,窄屏滑上来的详情层把列表整块(含加号)盖住,
详情自己的回复按钮才露得出来。Split 模式下加号仍在左栏,与 WebUI 两栏并排一致。
改法:把 `Stack({ alignContent: BottomEnd }) { 列表; 加号 }` 整体放进
`Navigation(this.navPathStack) { ... }` 的构建体内;通信页根的
`bgActive ? Transparent : pageBg` 保留(判据要求 ≥5 处让出页面底)。
判据(harmony-nav.test.mjs 新增一条,含变异自检):
- compose 加号必须在 `Navigation(...)` 的花括号**内**;
- `.navDestination(...)` 之后不得再出现 compose 加号。
用 `git show HEAD:...MainPage.ets`(改动前版本)复核:两条断言在 bug 版本上
**都失败**(inside=False / after=True),说明判据抓的正是这个层级错位,
不是"存在一个 compose 按钮"那种在 bug 版本上也成立的弱断言。
实测(模拟器 1256×2760):详情页只剩自己的「回复」按钮,加号不再悬空;
截图 /tmp/harmony-fabfix4.jpeg。列表页加号位置不变(仍在右下角)。
测试:200 passed / 0 failed。
This commit is contained in:
@ -1225,8 +1225,21 @@ struct CommPage {
|
||||
}
|
||||
|
||||
build() {
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
Navigation(this.navPathStack) {
|
||||
Navigation(this.navPathStack) {
|
||||
/*
|
||||
* ★ 悬浮加号必须待在 **导航栏内容(列表侧)内部**,不能当 `Navigation` 的兄弟。
|
||||
*
|
||||
* 原来它和 `Navigation` 平级放在外层 Stack 里 —— 窄屏 Stack 模式 push 详情时,
|
||||
* 详情是画在 `Navigation` **里面**的,而外层那个加号画在 `Navigation` **之上**,
|
||||
* 于是详情页右下多出一个悬空的 compose 圆,正好压在详情自己的「回复」按钮上
|
||||
* (2026-09-17 模拟器截图硬证)。
|
||||
*
|
||||
* WebUI 的对应物是 `.comm-pane`:加号挂在**列表窗格内部**
|
||||
* (`App.tsx` 的 `{listBody}<ComposeFab />`),所以窄屏滑上来的详情层
|
||||
* 把列表整块(含加号)盖住 —— 详情自己的回复按钮才露得出来。
|
||||
* Split 模式下加号仍留在左栏(与 WebUI 的两栏并排一致)。
|
||||
*/
|
||||
Stack({ alignContent: Alignment.BottomEnd }) {
|
||||
Column() {
|
||||
this.CommTabBar()
|
||||
|
||||
@ -1245,31 +1258,35 @@ struct CommPage {
|
||||
}
|
||||
}
|
||||
.width('100%').height('100%')
|
||||
}
|
||||
.navDestination(this.DestinationBuilder)
|
||||
.mode(NavigationMode.Auto)
|
||||
/* WebUI 邮件列表栏固定约 320px;Auto 的断点 = 列表最小宽 + 详情最小宽。 */
|
||||
.navBarWidth(320)
|
||||
.navBarWidthRange([280, 360])
|
||||
.minContentWidth(360)
|
||||
.hideTitleBar(true)
|
||||
.width('100%').height('100%')
|
||||
|
||||
/*
|
||||
* 悬浮的圆形加号(用户点名要的形状):56 圆、品牌色、右下角。
|
||||
* 放在通信页这一层,所以三个栏里都在 —— 新建邮件这件事不挑栏。
|
||||
*/
|
||||
Button() {
|
||||
AmIcon({ iconName: 'compose', iconSize: 24, iconColor: Theme.surface })
|
||||
/*
|
||||
* 悬浮的圆形加号(用户点名要的形状):56 圆、品牌色、右下角。
|
||||
* 三个栏里都在(新建邮件这件事不挑栏),但**只在列表窗格内**。
|
||||
*/
|
||||
Button() {
|
||||
AmIcon({ iconName: 'compose', iconSize: 24, iconColor: Theme.surface })
|
||||
}
|
||||
.width(56).height(56)
|
||||
.borderRadius(28)
|
||||
.backgroundColor(Theme.accent)
|
||||
.margin({ right: 16, bottom: 16 })
|
||||
.onClick(() => { this.openCompose(); })
|
||||
}
|
||||
.width(56).height(56)
|
||||
.borderRadius(28)
|
||||
.backgroundColor(Theme.accent)
|
||||
.margin({ right: 16, bottom: 16 })
|
||||
.onClick(() => { this.openCompose(); })
|
||||
.width('100%').height('100%')
|
||||
/*
|
||||
* 背景开关仍在这一层(它是通信页的根):卡不透明、容器透明,
|
||||
* 壁纸才从卡片间与顶/底边缘透出来(与 WebUI 的 `.comm-pane` 同构)。
|
||||
*/
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
}
|
||||
.navDestination(this.DestinationBuilder)
|
||||
.mode(NavigationMode.Auto)
|
||||
/* WebUI 邮件列表栏固定约 320px;Auto 的断点 = 列表最小宽 + 详情最小宽。 */
|
||||
.navBarWidth(320)
|
||||
.navBarWidthRange([280, 360])
|
||||
.minContentWidth(360)
|
||||
.hideTitleBar(true)
|
||||
.width('100%').height('100%')
|
||||
.backgroundColor(this.bgActive ? Color.Transparent : Theme.pageBg)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user