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:
@ -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 才开' }
|
||||
];
|
||||
|
||||
/**
|
||||
|
||||
@ -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 })
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user