diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js index 3bbc7c30df548553ddbe238f448cf672d5d905bd..f45a48ce24c159d1f89ef4dbd67a0127a9df24d9 100644 --- a/customappbar/interfaces/custom_app_bar.js +++ b/customappbar/interfaces/custom_app_bar.js @@ -37,7 +37,7 @@ const MENU_BACK_COLOR = '#99FFFFFF'; const MENU_MARGIN_TOP = 10; // 半屏参数 const BUTTON_IMAGE_SIZE = 18; -const HALF_CONTAINER_BORFER_SIZE = 32; +const HALF_CONTAINER_BORDER_SIZE = 32; const HALF_BUTTON_BACK_COLOR = '#0D000000'; const HALF_BUTTON_IMAGE_COLOR = '#0C000000'; const HALF_MENU_MARGIN = 16; @@ -51,8 +51,9 @@ const TITLE_MARGIN_RIGHT = 12; const TITLE_MARGIN_TOP = 8; const TITLE_LABEL_MARGIN = 8.5; const TITLE_TEXT_MARGIN = 3; -const MAX_WIDTH = 480; -const MAX_WIDTH_LIMIT = 600; +const MD_WIDTH = 480; +const LG_WIDTH_LIMIT = 0.6; +const LG_WIDTH_HEIGHT_RATIO = 1.95; const ARKUI_APP_BAR_COLOR_CONFIGURATION = 'arkui_app_bar_color_configuration'; const ARKUI_APP_BAR_MENU_SAFE_AREA = 'arkui_app_bar_menu_safe_area'; const ARKUI_APP_BAR_CONTENT_SAFE_AREA = 'arkui_app_bar_content_safe_area'; @@ -62,6 +63,8 @@ const ARKUI_APP_BG_COLOR = 'arkui_app_bg_color'; const EVENT_NAME_CUSTOM_APP_BAR_MENU_CLICK = 'arkui_custom_app_bar_menu_click'; const EVENT_NAME_CUSTOM_APP_BAR_CLOSE_CLICK = 'arkui_custom_app_bar_close_click'; const EVENT_NAME_CUSTOM_APP_BAR_DID_BUILD = 'arkui_custom_app_bar_did_build'; +const EVENT_NAME_CUSTOM_APP_BAR_CREATE_SERVICE_PANEL = 'arkui_custom_app_bar_create_service_panel'; + /** * 适配不同颜色模式集合 */ @@ -112,11 +115,9 @@ export class CustomAppBar extends ViewPU { this.__contentMarginRight = new ObservedPropertySimplePU(0, this, 'contentMarginRight'); this.__contentMarginBottom = new ObservedPropertySimplePU(0, this, 'contentMarginBottom'); this.__isHalfScreen = new ObservedPropertySimplePU(true, this, 'isHalfScreen'); - this.isHalfToFullScreen = false; this.__containerHeight = new ObservedPropertySimplePU('0%', this, 'containerHeight'); this.__containerWidth = new ObservedPropertySimplePU('100%', this, 'containerWidth'); this.__stackHeight = new ObservedPropertySimplePU('100%', this, 'stackHeight'); - this.__borderSize = new ObservedPropertySimplePU(HALF_CONTAINER_BORFER_SIZE, this, 'borderSize'); this.__titleOpacity = new ObservedPropertySimplePU(0, this, 'titleOpacity'); this.__buttonOpacity = new ObservedPropertySimplePU(1, this, 'buttonOpacity'); this.__titleHeight = new ObservedPropertySimplePU(0, this, 'titleHeight'); @@ -124,9 +125,10 @@ export class CustomAppBar extends ViewPU { this.__maskOpacity = new ObservedPropertySimplePU(0, this, 'maskOpacity'); this.__maskBlurScale = new ObservedPropertySimplePU(0, this, 'maskBlurScale'); this.__contentBgColor = new ObservedPropertyObjectPU('#FFFFFFFF', this, 'contentBgColor'); - this.__isShowPanel = new ObservedPropertySimplePU(false, this, 'isShowPanel'); this.__statusBarHeight = new ObservedPropertySimplePU(0, this, 'statusBarHeight'); - this.listener = mediaquery.matchMediaSync('(orientation: landscape)'); + this.__ratio = new ObservedPropertyObjectPU(undefined, this, 'ratio'); + this.__breakPoint = new ObservedPropertySimplePU(BreakPointsType.NONE, this, 'breakPoint'); + this.isHalfToFullScreen = false; this.isDark = true; this.bundleName = ''; this.labelName = ''; @@ -134,7 +136,11 @@ export class CustomAppBar extends ViewPU { this.fullContentMarginTop = 0; this.windowWidth = 0; this.windowHeight = 0; + this.smListener = mediaquery.matchMediaSync('(0vp MAX_WIDTH_LIMIT) { - this.containerWidth = MAX_WIDTH; - } this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight; + this.halfScreenShowAnimation(); } else { this.containerHeight = '100%'; this.containerWidth = '100%'; } - let portraitFunc = (mediaQueryResult) => this.onPortrait(mediaQueryResult); - this.listener.on('change', portraitFunc); - } - onPortrait(mediaQueryResult) { - console.log(`onPortrait this.windowWidth = ${this.windowWidth} this.windowHeight = ${this.windowHeight}`); - let displayData = display.getDefaultDisplaySync(); - this.windowWidth = px2vp(displayData.width); - this.windowHeight = px2vp(displayData.height); - if (this.isHalfScreen && this.windowWidth > MAX_WIDTH_LIMIT) { - Context.animateTo({ - duration: 250, - curve: Curve.Sharp, - }, () => { - this.containerWidth = MAX_WIDTH; - }); + } + aboutToDisappear() { + this.smListener.off('change'); + this.mdListener.off('change'); + this.lgListener.off('change'); + } + initBreakPointListener() { + this.smListener.on('change', (mediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.SM; + } + }); + this.mdListener.on('change', (mediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.MD; + } + }); + this.lgListener.on('change', (mediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.LG; + } + }); + } + onBreakPointChange() { + if (this.windowWidth === 0) { + let displayData = display.getDefaultDisplaySync(); + this.windowWidth = px2vp(displayData.width); + this.windowHeight = px2vp(displayData.height); } - else { - Context.animateTo({ - duration: 250, - curve: Curve.Sharp, - }, () => { + if (this.isHalfScreen) { + if (this.breakPoint === BreakPointsType.SM) { this.containerWidth = '100%'; - }); + } + else if (this.breakPoint === BreakPointsType.MD) { + this.containerWidth = MD_WIDTH; + } + else if (this.breakPoint === BreakPointsType.LG) { + this.containerWidth = + this.windowWidth > this.windowHeight ? this.windowHeight * LG_WIDTH_LIMIT : this.windowWidth * LG_WIDTH_LIMIT; + } } } parseBoolean(value) { @@ -569,6 +592,7 @@ export class CustomAppBar extends ViewPU { } else if (eventName === ARKUI_APP_BAR_SCREEN) { this.isHalfScreen = this.parseBoolean(param); + this.initBreakPointListener(); } else if (eventName === ARKUI_APP_BG_COLOR) { this.contentBgColor = param; @@ -607,6 +631,12 @@ export class CustomAppBar extends ViewPU { onCloseButtonClick() { ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_CLOSE_CLICK); } + /** + * 点击title栏 + */ + onEyelashTitleClick() { + ContainerAppBar.callNative(EVENT_NAME_CUSTOM_APP_BAR_CREATE_SERVICE_PANEL, 1); + } /** * 触发构建回调 */ @@ -629,6 +659,7 @@ export class CustomAppBar extends ViewPU { curve: curves.interpolatingSpring(0, 1, 328, 36), }, () => { this.containerHeight = '100%'; + this.ratio = this.breakPoint === BreakPointsType.LG ? 1 / LG_WIDTH_HEIGHT_RATIO : undefined; }); // 标题栏渐显 Context.animateTo({ @@ -697,6 +728,7 @@ export class CustomAppBar extends ViewPU { } }, () => { this.containerHeight = '0%'; + this.ratio = undefined; }); // 蒙层渐隐 Context.animateTo({ @@ -832,8 +864,7 @@ export class CustomAppBar extends ViewPU { ViewStackProcessor.visualState(); Row.borderRadius(EYELASH_HEIGHT / 2); Row.onClick(() => { - console.info(LOG_TAG, ' show panel is ' + this.isShowPanel); - this.isShowPanel = true; + this.onEyelashTitleClick(); }); Row.margin({ start: LengthMetrics.vp(TITLE_MARGIN_RIGHT) }); }, Row); @@ -888,6 +919,7 @@ export class CustomAppBar extends ViewPU { Row.create(); Row.width(this.containerWidth); Row.height(this.containerHeight); + Row.aspectRatio(ObservedObject.GetRawObject(this.ratio)); Row.alignItems(VerticalAlign.Top); Row.justifyContent(FlexAlign.End); Row.opacity(this.buttonOpacity); @@ -943,34 +975,6 @@ export class CustomAppBar extends ViewPU { Row.pop(); Column.pop(); } - panelBuilder(parent = null) { - this.observeComponentCreation2((elmtId, isInitialRender) => { - UIExtensionComponent.create({ - bundleName: 'com.huawei.hmos.asde', - abilityName: 'PanelAbility', - moduleName: 'panel', - parameters: { - 'ability.want.params.uiExtensionType': 'sysDialog/atomicServicePanel', - 'bundleName': this.bundleName, - 'pageName': 'DETAIL' - } - }); - UIExtensionComponent.defaultFocus(true); - UIExtensionComponent.height('100%'); - UIExtensionComponent.width('100%'); - UIExtensionComponent.onError(err => { - this.isShowPanel = false; - console.error(LOG_TAG, 'call up UIExtension error! %{public}s', err.message); - }); - UIExtensionComponent.onReceive(() => { - console.error(LOG_TAG, 'call up UIExtension error!'); - }); - UIExtensionComponent.onTerminated(() => { - console.error(LOG_TAG, 'onTerminated'); - this.isShowPanel = false; - }); - }, UIExtensionComponent); - } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Column.create(); @@ -979,9 +983,6 @@ export class CustomAppBar extends ViewPU { Column.justifyContent(FlexAlign.End); Column.backgroundColor(Color.Transparent); Column.hitTestBehavior(HitTestMode.Transparent); - Column.bindContentCover(this.isShowPanel, { builder: () => { - this.panelBuilder.call(this); - } }); }, Column); this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create({ alignContent: Alignment.TopEnd }); @@ -1034,6 +1035,7 @@ export class CustomAppBar extends ViewPU { Column.create(); Column.height(this.containerHeight); Column.width(this.containerWidth); + Column.aspectRatio(ObservedObject.GetRawObject(this.ratio)); Column.justifyContent(FlexAlign.End); Column.hitTestBehavior(HitTestMode.Transparent); }, Column); @@ -1062,8 +1064,8 @@ export class CustomAppBar extends ViewPU { Row.backgroundColor(Color.Transparent); Row.backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK); Row.borderRadius({ - topLeft: this.borderSize, - topRight: this.borderSize, + topLeft: HALF_CONTAINER_BORDER_SIZE, + topRight: HALF_CONTAINER_BORDER_SIZE, }); Row.clip(true); Row.alignItems(VerticalAlign.Bottom); @@ -1097,6 +1099,12 @@ export class CustomAppBar extends ViewPU { return 'CustomAppBar'; } } +const BreakPointsType = { + NONE: 'NONE', + SM: 'SM', + MD: 'MD', + LG: 'LG', +}; ViewStackProcessor.StartGetAccessRecordingFor(ViewStackProcessor.AllocateNewElmetIdForNextComponent()); loadCustomAppbar(new CustomAppBar(undefined, {})); diff --git a/customappbar/source/custom_app_bar.ets b/customappbar/source/custom_app_bar.ets index 241e7615674e2ef3fd0f9cb380f5d88f7a36aced..462aaa2ccb45621701747320daccbe5fac81a871 100644 --- a/customappbar/source/custom_app_bar.ets +++ b/customappbar/source/custom_app_bar.ets @@ -32,7 +32,7 @@ const MENU_BACK_COLOR: string = '#99FFFFFF'; const MENU_MARGIN_TOP: number = 10; // 半屏参数 const BUTTON_IMAGE_SIZE: number = 18; -const HALF_CONTAINER_BORFER_SIZE: number = 32; +const HALF_CONTAINER_BORDER_SIZE: number = 32; const HALF_BUTTON_BACK_COLOR: string = '#0D000000'; const HALF_BUTTON_IMAGE_COLOR: string = '#0C000000'; const HALF_MENU_MARGIN: number = 16; @@ -46,11 +46,13 @@ const TITLE_MARGIN_RIGHT: number = 12; const TITLE_MARGIN_TOP: number = 8; const TITLE_LABEL_MARGIN: number = 8.5; const TITLE_TEXT_MARGIN: number = 3; -const MAX_WIDTH: number = 480; -const MAX_WIDTH_LIMIT: number = 600; +const MD_WIDTH: number = 480; +const LG_WIDTH_LIMIT: number = 0.6; +const LG_WIDTH_HEIGHT_RATIO: number = 1.95; const ARKUI_APP_BAR_COLOR_CONFIGURATION: string = 'arkui_app_bar_color_configuration'; const ARKUI_APP_BAR_MENU_SAFE_AREA: string = 'arkui_app_bar_menu_safe_area'; const ARKUI_APP_BAR_CONTENT_SAFE_AREA: string = 'arkui_app_bar_content_safe_area'; + const ARKUI_APP_BAR_BAR_INFO: string = 'arkui_app_bar_info'; const ARKUI_APP_BAR_SCREEN: string = 'arkui_app_bar_screen'; const ARKUI_APP_BG_COLOR: string = 'arkui_app_bg_color'; @@ -58,6 +60,7 @@ const ARKUI_APP_BG_COLOR: string = 'arkui_app_bg_color'; const EVENT_NAME_CUSTOM_APP_BAR_MENU_CLICK = 'arkui_custom_app_bar_menu_click'; const EVENT_NAME_CUSTOM_APP_BAR_CLOSE_CLICK = 'arkui_custom_app_bar_close_click'; const EVENT_NAME_CUSTOM_APP_BAR_DID_BUILD = 'arkui_custom_app_bar_did_build'; +const EVENT_NAME_CUSTOM_APP_BAR_CREATE_SERVICE_PANEL = 'arkui_custom_app_bar_create_service_panel'; /** * 适配不同颜色模式集合 @@ -72,6 +75,13 @@ class ColorGroup { } } +enum BreakPointsType { + NONE = 'NONE', + SM = 'SM', + MD = 'MD', + LG = 'LG' +} + const colorMap: Map = new Map([ [ICON_FILL_COLOR_DEFAULT, new ColorGroup('#182431', '#e5ffffff')], [BORDER_COLOR_DEFAULT, new ColorGroup('#33182431', '#4Dffffff')], @@ -110,11 +120,9 @@ export struct CustomAppBar { @State contentMarginBottom: number = 0; // 半屏参数 @State isHalfScreen: boolean = true; - private isHalfToFullScreen: boolean = false; - @State containerHeight: string = '0%'; + @State containerHeight: string | number = '0%'; @State containerWidth: string | number = '100%'; @State stackHeight: string = '100%'; - @State borderSize: number = HALF_CONTAINER_BORFER_SIZE; @State titleOpacity: number = 0; @State buttonOpacity: number = 1; @State titleHeight: number = 0; @@ -122,9 +130,10 @@ export struct CustomAppBar { @State maskOpacity: number = 0; @State maskBlurScale: number = 0; @State contentBgColor: ResourceColor = '#FFFFFFFF'; - @State isShowPanel: boolean = false; @State statusBarHeight: number = 0; - private listener = mediaquery.matchMediaSync('(orientation: landscape)'); + @State ratio: number | undefined = undefined; + @State @Watch('onBreakPointChange') breakPoint: BreakPointsType = BreakPointsType.NONE + private isHalfToFullScreen: boolean = false; private isDark: boolean = true; private bundleName: string = ''; private labelName: string = ''; @@ -132,46 +141,60 @@ export struct CustomAppBar { private fullContentMarginTop: number = 0; private windowWidth: number = 0; private windowHeight: number = 0; + private smListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp MAX_WIDTH_LIMIT) { - this.containerWidth = MAX_WIDTH; - } this.titleHeight = EYELASH_HEIGHT + 2 * TITLE_MARGIN_TOP + this.statusBarHeight; + this.halfScreenShowAnimation(); } else { this.containerHeight = '100%'; this.containerWidth = '100%'; } - let portraitFunc = - (mediaQueryResult: mediaquery.MediaQueryResult): void => this.onPortrait(mediaQueryResult); - this.listener.on('change', portraitFunc); } - onPortrait(mediaQueryResult: mediaquery.MediaQueryResult): void { - console.log(`onPortrait this.windowWidth = ${this.windowWidth} this.windowHeight = ${this.windowHeight}`) - let displayData = display.getDefaultDisplaySync(); - this.windowWidth = px2vp(displayData.width) - this.windowHeight = px2vp(displayData.height); - if (this.isHalfScreen && this.windowWidth > MAX_WIDTH_LIMIT) { - animateTo({ - duration: 250, - curve: Curve.Sharp, - }, () => { - this.containerWidth = MAX_WIDTH; - }) - } else { - animateTo({ - duration: 250, - curve: Curve.Sharp, - }, () => { + aboutToDisappear(): void { + this.smListener.off('change'); + this.mdListener.off('change'); + this.lgListener.off('change'); + } + + initBreakPointListener(): void { + this.smListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.SM + } + }) + this.mdListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.MD + } + }) + this.lgListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { + if (mediaQueryResult.matches) { + this.breakPoint = BreakPointsType.LG + } + }) + } + + onBreakPointChange(): void { + if (this.windowWidth === 0) { + let displayData = display.getDefaultDisplaySync(); + this.windowWidth = px2vp(displayData.width) + this.windowHeight = px2vp(displayData.height); + } + if (this.isHalfScreen) { + if (this.breakPoint === BreakPointsType.SM) { this.containerWidth = '100%'; - }) + } else if (this.breakPoint === BreakPointsType.MD) { + this.containerWidth = MD_WIDTH + } else if (this.breakPoint === BreakPointsType.LG) { + this.containerWidth = + this.windowWidth > this.windowHeight ? this.windowHeight * LG_WIDTH_LIMIT : this.windowWidth * LG_WIDTH_LIMIT; + } } } @@ -230,6 +253,7 @@ export struct CustomAppBar { this.labelName = splitArray[1]; } else if (eventName === ARKUI_APP_BAR_SCREEN) { this.isHalfScreen = this.parseBoolean(param); + this.initBreakPointListener(); } else if (eventName === ARKUI_APP_BG_COLOR) { this.contentBgColor = param; } @@ -270,6 +294,12 @@ export struct CustomAppBar { onCloseButtonClick(): void { } + /** + * 点击title栏 + */ + onEyelashTitleClick(): void { + } + /** * 触发构建回调 */ @@ -292,6 +322,8 @@ export struct CustomAppBar { curve: curves.interpolatingSpring(0, 1, 328, 36), }, () => { this.containerHeight = '100%'; + this.ratio = this.breakPoint === BreakPointsType.LG ? 1 / LG_WIDTH_HEIGHT_RATIO : undefined; + }); // 标题栏渐显 animateTo({ @@ -362,6 +394,7 @@ export struct CustomAppBar { } }, () => { this.containerHeight = '0%'; + this.ratio = undefined; }); // 蒙层渐隐 animateTo({ @@ -492,8 +525,7 @@ export struct CustomAppBar { }) .borderRadius(EYELASH_HEIGHT / 2) .onClick(() => { - console.info(LOG_TAG, ' show panel is ' + this.isShowPanel); - this.isShowPanel = true; + this.onEyelashTitleClick(); }) .margin({ start: LengthMetrics.vp(TITLE_MARGIN_RIGHT) }) } @@ -508,7 +540,7 @@ export struct CustomAppBar { } .justifyContent(FlexAlign.Start) .height(this.titleHeight) - .offset({y:this.titleOffset}) + .offset({ y: this.titleOffset }) .hitTestBehavior(HitTestMode.Transparent) } @@ -517,33 +549,34 @@ export struct CustomAppBar { Column() { Row() { Row() { - Button({ type: ButtonType.Circle }) { - SymbolGlyph($r('sys.symbol.arrow_up_left_and_arrow_down_right')) - .fontSize(BUTTON_IMAGE_SIZE) - .fontWeight(FontWeight.Medium) - .fontColor([this.halfButtonImageColor]) - }.width(BUTTON_SIZE).height(BUTTON_SIZE).backgroundColor(this.halfButtonBackColor) - .onClick(() => { - this.expendContainerAnimation(); - }) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.arrow_up_left_and_arrow_down_right')) + .fontSize(BUTTON_IMAGE_SIZE) + .fontWeight(FontWeight.Medium) + .fontColor([this.halfButtonImageColor]) + }.width(BUTTON_SIZE).height(BUTTON_SIZE).backgroundColor(this.halfButtonBackColor) + .onClick(() => { + this.expendContainerAnimation(); + }) - Button({ type: ButtonType.Circle }) { - SymbolGlyph($r('sys.symbol.xmark')) - .fontSize(BUTTON_IMAGE_SIZE) - .fontWeight(FontWeight.Medium) - .fontColor([this.halfButtonImageColor]) - } - .width(BUTTON_SIZE) - .height(BUTTON_SIZE) - .margin({ - start: LengthMetrics.vp(VIEW_MARGIN_RIGHT), - }) - .backgroundColor(this.halfButtonBackColor) - .onClick(() => { - this.closeContainerAnimation(); - }) + Button({ type: ButtonType.Circle }) { + SymbolGlyph($r('sys.symbol.xmark')) + .fontSize(BUTTON_IMAGE_SIZE) + .fontWeight(FontWeight.Medium) + .fontColor([this.halfButtonImageColor]) + } + .width(BUTTON_SIZE) + .height(BUTTON_SIZE) + .margin({ + start: LengthMetrics.vp(VIEW_MARGIN_RIGHT), + }) + .backgroundColor(this.halfButtonBackColor) + .onClick(() => { + this.closeContainerAnimation(); + }) } - .geometryTransition('menubar').justifyContent(FlexAlign.End) + .geometryTransition('menubar') + .justifyContent(FlexAlign.End) .transition(TransitionEffect.OPACITY) .borderRadius(MENU_RADIUS) .height(BUTTON_SIZE) @@ -554,6 +587,7 @@ export struct CustomAppBar { } .width(this.containerWidth) .height(this.containerHeight) + .aspectRatio(this.ratio) .alignItems(VerticalAlign.Top) .justifyContent(FlexAlign.End) .opacity(this.buttonOpacity) @@ -563,36 +597,6 @@ export struct CustomAppBar { .hitTestBehavior(HitTestMode.Transparent) } - @Builder - panelBuilder() { - UIExtensionComponent({ - bundleName: 'com.huawei.hmos.asde', - abilityName: 'PanelAbility', - moduleName: 'panel', - parameters: { - 'ability.want.params.uiExtensionType': 'sysDialog/atomicServicePanel', - 'bundleName': this.bundleName, - 'pageName': 'DETAIL' - } - }) - .defaultFocus(true) - .height('100%') - .width('100%') - .onError( - err => { - this.isShowPanel = false; - console.error(LOG_TAG, 'call up UIExtension error! %{public}s', err.message); - } - ) - .onReceive(() => { - console.error(LOG_TAG, 'call up UIExtension error!'); - }) - .onTerminated(() => { - console.error(LOG_TAG, 'onTerminated'); - this.isShowPanel = false; - }) - } - build() { Column() { Stack({ alignContent: Alignment.TopEnd }) { @@ -625,8 +629,8 @@ export struct CustomAppBar { .backgroundColor(Color.Transparent) .backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK) .borderRadius({ - topLeft: this.borderSize, - topRight: this.borderSize, + topLeft: HALF_CONTAINER_BORDER_SIZE, + topRight: HALF_CONTAINER_BORDER_SIZE, }) .clip(true) .alignItems(VerticalAlign.Bottom) @@ -635,12 +639,14 @@ export struct CustomAppBar { } .height(this.containerHeight) .width(this.containerWidth) + .aspectRatio(this.ratio) .justifyContent(FlexAlign.End) .hitTestBehavior(HitTestMode.Transparent) }.height('100%') .width('100%') .justifyContent(FlexAlign.End) .hitTestBehavior(HitTestMode.Transparent) + if (this.isHalfScreen) { this.halfScreenMenuBar() } else { @@ -658,6 +664,5 @@ export struct CustomAppBar { .justifyContent(FlexAlign.End) .backgroundColor(Color.Transparent) .hitTestBehavior(HitTestMode.Transparent) - .bindContentCover(this.isShowPanel, this.panelBuilder()) } } \ No newline at end of file