ke: 玻璃面板(系统材质):WideSidebar bgActive 走 BlurStyle,撤回手写 alpha

遵守既有玻璃纪律(cross-client-theme B/C):
- 手写 8 位半透明色一律禁止(半透明归系统材质),撤回 #E6FFFFFF 尝试
- 玻璃 = 系统 BlurStyle(navMaterial) + 不透明系统色 surface,半透明由 BlurStyle 给
- WideSidebar 加 @Prop bgActive:bgActive 时 backgroundBlurStyle,否则 NONE
- 内容面板只保留几何(radius/clip/padding/gap),不加材质(判据按 @Builder 解析
  owner 会与 NavBar 撞 key;壁纸从面板缝隙露出已达成 app-shell 观感)
- GLASS_REGISTRY 登记 WideSidebar#NavItemBuilder(判据按最近 @Builder 命名)
This commit is contained in:
2026-09-16 08:06:36 +08:00
parent 31fdc1a3d8
commit 6cd64a4384
3 changed files with 21 additions and 1 deletions

View File

@ -305,7 +305,9 @@ test('B|旧机制不得回来:手写玻璃 alpha、替系统猜深色、与
*/
const GLASS_REGISTRY = [
// 文件(相对 ets 根) + 组件/Builder 名:为什么这里可以有一层系统材质
{ file: 'pages/MainPage.ets', provider: 'NavBar', why: 'P5 悬浮玻璃条:浮在**会滚动的内容**之上(pi 给的放行条件②),壁纸层整个不吃材质' }
{ file: 'pages/MainPage.ets', provider: 'NavBar', why: 'P5 悬浮玻璃条:浮在**会滚动的内容**之上(pi 给的放行条件②),壁纸层整个不吃材质' },
// ★ 2026-09-16:宽屏 app-shell 复刻 WebUI —— 面板走系统材质(半透明由 BlurStyle 给,不手写 alpha)
{ file: 'pages/WideSidebar.ets', provider: 'NavItemBuilder', why: '宽屏侧栏(判据按最近的 @Builder 命名):浮在壁纸之上、背后是会滚动的导航内容(WebUI Sidebar 同形状),bgActive 才开' }
];
/**

View File

@ -1872,6 +1872,7 @@ struct MainPage {
if (this.isWide) {
WideSidebar({
currentIndex: this.currentIndex,
bgActive: this.bgActive,
onSelect: (index: number) => { this.currentIndex = normalizeNavIndex(index); },
onSettings: () => { this.getUIContext().getRouter().pushUrl({ url: 'pages/SettingsPage' }); }
})
@ -1902,6 +1903,13 @@ struct MainPage {
}
.width('100%')
.height('100%')
/*
* ★ 2026-09-16:宽屏内容面板的玻璃几何(对齐 WebUI app-shell)。
* 圆角 14 + clip(子内容被裁剪)+ 容器 padding/gap(面板缝隙露壁纸)。
* 玻璃材质只在 WideSidebar 上(判据按 @Builder 解析 owner,内容面板会与
* NavBar 撞 key);内容面板用不透明系统色 surface —— 壁纸从缝隙露出已达成 app-shell 观感。
*/
.backgroundColor(Theme.surface)
.borderRadius(this.isWide ? Theme.glassRadius : 0)
.clip(this.isWide)
.padding({ bottom: this.isWide ? 0 : NAV_CONTENT_RESERVE })

View File

@ -27,6 +27,8 @@ export const SIDEBAR_WIDTH: number = 60;
export struct WideSidebar {
/** 当前选中的导航下标 */
@Prop currentIndex: number = 0;
/** 背景是否开启:开着=玻璃面板(blur + 0.88 白),关着=不透明白 */
@Prop bgActive: boolean = false;
/** 选中回调 */
onSelect: (index: number) => void = (): void => {};
/** 设置回调 */
@ -72,7 +74,15 @@ export struct WideSidebar {
.width(SIDEBAR_WIDTH)
.height('100%')
.padding({ top: 12, bottom: 12 })
/*
* ★ 2026-09-16:玻璃面板(对齐 WebUI app-shell)。
* bgActive(自定义壁纸开)时:系统材质 BlurStyle(半透明由系统给,不许手写 alpha)
* + 不透明系统色 surface;关着:纯 surface(普通面板)。
* 登记:GLASS_REGISTRY(cross-client-theme.test.mjs)—— 背后是会滚动的导航内容。
*/
.backgroundBlurStyle(this.bgActive ? Theme.navMaterial : BlurStyle.NONE)
.backgroundColor(Theme.surface)
.borderRadius(Theme.glassRadius)
.clip(true)
}
}