ke: 宽屏 app-shell 几何落地:padding/gap 10 + 面板圆角 14(WebUI 一比一)
- MainPage 宽屏 Row({ space: Theme.paneGap }) —— gap 10(窄屏无子间距,无害)
- 内容面板 borderRadius(isWide ? glassRadius : 0) + clip(isWide) —— 圆角 14 仅宽屏
- 容器 padding 条件:宽屏 paneGap 10(壁纸从缝隙露出)/ 窄屏 0(贴合全屏)
- Theme.glassRadius=14 / paneGap=10 已在上一提交引入,这里真正用上
- 判据:harmony-widescreen ⑤ 钉 app-shell 几何(令牌值/space/radius/clip/padding 与 WebUI 同值)
This commit is contained in:
@ -1863,8 +1863,12 @@ struct MainPage {
|
||||
* 底部**必须让出** NAV_CONTENT_RESERVE 的高度:条是浮在内容之上的,
|
||||
* 不让出这一段,列表最后一行就永远压在玻璃条底下 —— 看得见、点不到。
|
||||
* 宽屏没有底部导航条,所以 padding 为 0。
|
||||
*
|
||||
* ★ 2026-09-16:宽屏复刻 WebUI `app-shell` 几何 ——
|
||||
* `padding: var(--pane-gap)`(10) + `gap: var(--pane-gap)`(10) + 面板 `radius: var(--radius-card)`(14)。
|
||||
* 壁纸从面板缝隙露出(`bgActive` 时)。窄屏贴合全屏(无 padding / 无圆角)。
|
||||
*/
|
||||
Row() {
|
||||
Row({ space: Theme.paneGap }) {
|
||||
if (this.isWide) {
|
||||
WideSidebar({
|
||||
currentIndex: this.currentIndex,
|
||||
@ -1898,10 +1902,18 @@ struct MainPage {
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.borderRadius(this.isWide ? Theme.glassRadius : 0)
|
||||
.clip(this.isWide)
|
||||
.padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
.padding({
|
||||
left: this.isWide ? Theme.paneGap : 0,
|
||||
right: this.isWide ? Theme.paneGap : 0,
|
||||
top: this.isWide ? Theme.paneGap : 0,
|
||||
bottom: this.isWide ? Theme.paneGap : 0
|
||||
})
|
||||
|
||||
// 浮动玻璃条浮在最上层(自绘,见 NavBar 的说明)。宽屏没有底部导航。
|
||||
if (!this.isWide) {
|
||||
|
||||
Reference in New Issue
Block a user