diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js index f45a48ce24c159d1f89ef4dbd67a0127a9df24d9..142e315b675cfe91bbb2deedb6ffe8f95a09c1fe 100644 --- a/customappbar/interfaces/custom_app_bar.js +++ b/customappbar/interfaces/custom_app_bar.js @@ -35,6 +35,9 @@ const ICON_FILL_COLOR_DEFAULT = '#182431'; const BORDER_COLOR_DEFAULT = '#33000000'; const MENU_BACK_COLOR = '#99FFFFFF'; const MENU_MARGIN_TOP = 10; +const SM_MENU_MARGIN_END = 16; +const MD_MENU_MARGIN_END = 24; +const LG_MENU_MARGIN_END = 32; // 半屏参数 const BUTTON_IMAGE_SIZE = 18; const HALF_CONTAINER_BORDER_SIZE = 32; @@ -44,7 +47,7 @@ const HALF_MENU_MARGIN = 16; const EYELASH_HEIGHT = 36; const CHEVRON_HEIGHT = 20; const CHEVRON_WIDTH = 10; -const CHEVRON_MAIGIN = 4; +const CHEVRON_MARGIN = 4; const TITLE_FONT_SIZE = 14; const TITLE_LINE_HEIGHT = 16; const TITLE_MARGIN_RIGHT = 12; @@ -114,6 +117,7 @@ export class CustomAppBar extends ViewPU { this.__contentMarginLeft = new ObservedPropertySimplePU(0, this, 'contentMarginLeft'); this.__contentMarginRight = new ObservedPropertySimplePU(0, this, 'contentMarginRight'); this.__contentMarginBottom = new ObservedPropertySimplePU(0, this, 'contentMarginBottom'); + this.__menuMarginEnd = new ObservedPropertySimplePU(SM_MENU_MARGIN_END, this, 'menuMarginEnd'); this.__isHalfScreen = new ObservedPropertySimplePU(true, this, 'isHalfScreen'); this.__containerHeight = new ObservedPropertySimplePU('0%', this, 'containerHeight'); this.__containerWidth = new ObservedPropertySimplePU('100%', this, 'containerWidth'); @@ -183,6 +187,9 @@ export class CustomAppBar extends ViewPU { if (params.contentMarginBottom !== undefined) { this.contentMarginBottom = params.contentMarginBottom; } + if (params.menuMarginEnd !== undefined) { + this.menuMarginEnd = params.menuMarginEnd; + } if (params.isHalfScreen !== undefined) { this.isHalfScreen = params.isHalfScreen; } @@ -275,6 +282,7 @@ export class CustomAppBar extends ViewPU { this.__contentMarginLeft.purgeDependencyOnElmtId(rmElmtId); this.__contentMarginRight.purgeDependencyOnElmtId(rmElmtId); this.__contentMarginBottom.purgeDependencyOnElmtId(rmElmtId); + this.__menuMarginEnd.purgeDependencyOnElmtId(rmElmtId); this.__isHalfScreen.purgeDependencyOnElmtId(rmElmtId); this.__containerHeight.purgeDependencyOnElmtId(rmElmtId); this.__containerWidth.purgeDependencyOnElmtId(rmElmtId); @@ -304,6 +312,7 @@ export class CustomAppBar extends ViewPU { this.__contentMarginLeft.aboutToBeDeleted(); this.__contentMarginRight.aboutToBeDeleted(); this.__contentMarginBottom.aboutToBeDeleted(); + this.__menuMarginEnd.aboutToBeDeleted(); this.__isHalfScreen.aboutToBeDeleted(); this.__containerHeight.aboutToBeDeleted(); this.__containerWidth.aboutToBeDeleted(); @@ -399,6 +408,12 @@ export class CustomAppBar extends ViewPU { set contentMarginBottom(newValue) { this.__contentMarginBottom.set(newValue); } + get menuMarginEnd() { + return this.__menuMarginEnd.get(); + } + set menuMarginEnd(newValue) { + this.__menuMarginEnd.set(newValue); + } get isHalfScreen() { return this.__isHalfScreen.get(); } @@ -522,6 +537,9 @@ export class CustomAppBar extends ViewPU { this.windowWidth = px2vp(displayData.width); this.windowHeight = px2vp(displayData.height); } + if (menuMarginEndMap.has(this.breakPoint)) { + this.menuMarginEnd = menuMarginEndMap.get(this.breakPoint); + } if (this.isHalfScreen) { if (this.breakPoint === BreakPointsType.SM) { this.containerWidth = '100%'; @@ -750,7 +768,7 @@ export class CustomAppBar extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.id('AtomicServiceMenubarRowId'); - Row.margin({ top: this.statusBarHeight + MENU_MARGIN_TOP, left: VIEW_MARGIN_RIGHT, right: VIEW_MARGIN_RIGHT }); + Row.margin({ top: LengthMetrics.vp(this.statusBarHeight + MENU_MARGIN_TOP), end: LengthMetrics.vp(this.menuMarginEnd) }); Row.justifyContent(FlexAlign.End); Row.height(VIEW_HEIGHT); Row.hitTestBehavior(HitTestMode.Transparent); @@ -873,7 +891,7 @@ export class CustomAppBar extends ViewPU { Image.height(ICON_SIZE); Image.width(ICON_SIZE); Image.margin({ - start: LengthMetrics.vp(CHEVRON_MAIGIN) + start: LengthMetrics.vp(CHEVRON_MARGIN) }); }, Image); this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -900,7 +918,7 @@ export class CustomAppBar extends ViewPU { SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.chevron_right'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.height(CHEVRON_HEIGHT); SymbolGlyph.width(CHEVRON_WIDTH); - SymbolGlyph.margin({ start: LengthMetrics.vp(CHEVRON_MAIGIN), end: LengthMetrics.vp(CHEVRON_MAIGIN) }); + SymbolGlyph.margin({ start: LengthMetrics.vp(CHEVRON_MARGIN), end: LengthMetrics.vp(CHEVRON_MARGIN) }); SymbolGlyph.fontColor([Color.White]); }, SymbolGlyph); Row.pop(); @@ -1105,6 +1123,12 @@ const BreakPointsType = { MD: 'MD', LG: 'LG', }; +const menuMarginEndMap = new Map([ + [BreakPointsType.NONE, SM_MENU_MARGIN_END], + [BreakPointsType.SM, SM_MENU_MARGIN_END], + [BreakPointsType.MD, MD_MENU_MARGIN_END], + [BreakPointsType.LG, LG_MENU_MARGIN_END] +]); 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 462aaa2ccb45621701747320daccbe5fac81a871..b426bf86e79a7e8330e56007028aeea6018b7605 100644 --- a/customappbar/source/custom_app_bar.ets +++ b/customappbar/source/custom_app_bar.ets @@ -30,6 +30,9 @@ const ICON_FILL_COLOR_DEFAULT: string = '#182431'; const BORDER_COLOR_DEFAULT: string = '#33000000'; const MENU_BACK_COLOR: string = '#99FFFFFF'; const MENU_MARGIN_TOP: number = 10; +const SM_MENU_MARGIN_END: number = 16; +const MD_MENU_MARGIN_END: number = 24; +const LG_MENU_MARGIN_END: number = 32; // 半屏参数 const BUTTON_IMAGE_SIZE: number = 18; const HALF_CONTAINER_BORDER_SIZE: number = 32; @@ -39,7 +42,7 @@ const HALF_MENU_MARGIN: number = 16; const EYELASH_HEIGHT: number = 36; const CHEVRON_HEIGHT: number = 20; const CHEVRON_WIDTH: number = 10; -const CHEVRON_MAIGIN: number = 4; +const CHEVRON_MARGIN: number = 4; const TITLE_FONT_SIZE: number = 14; const TITLE_LINE_HEIGHT: number = 16; const TITLE_MARGIN_RIGHT: number = 12; @@ -82,6 +85,13 @@ enum BreakPointsType { LG = 'LG' } +const menuMarginEndMap: Map = new Map([ + [BreakPointsType.NONE, SM_MENU_MARGIN_END], + [BreakPointsType.SM, SM_MENU_MARGIN_END], + [BreakPointsType.MD, MD_MENU_MARGIN_END], + [BreakPointsType.LG, LG_MENU_MARGIN_END] +]); + const colorMap: Map = new Map([ [ICON_FILL_COLOR_DEFAULT, new ColorGroup('#182431', '#e5ffffff')], [BORDER_COLOR_DEFAULT, new ColorGroup('#33182431', '#4Dffffff')], @@ -118,6 +128,7 @@ export struct CustomAppBar { @State contentMarginLeft: number = 0; @State contentMarginRight: number = 0; @State contentMarginBottom: number = 0; + @State menuMarginEnd: number = SM_MENU_MARGIN_END; // 半屏参数 @State isHalfScreen: boolean = true; @State containerHeight: string | number = '0%'; @@ -132,7 +143,7 @@ export struct CustomAppBar { @State contentBgColor: ResourceColor = '#FFFFFFFF'; @State statusBarHeight: number = 0; @State ratio: number | undefined = undefined; - @State @Watch('onBreakPointChange') breakPoint: BreakPointsType = BreakPointsType.NONE + @State @Watch('onBreakPointChange') breakPoint: BreakPointsType = BreakPointsType.NONE; private isHalfToFullScreen: boolean = false; private isDark: boolean = true; private bundleName: string = ''; @@ -141,9 +152,9 @@ export struct CustomAppBar { private fullContentMarginTop: number = 0; private windowWidth: number = 0; private windowHeight: number = 0; - private smListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp { if (mediaQueryResult.matches) { - this.breakPoint = BreakPointsType.SM + this.breakPoint = BreakPointsType.SM; } }) this.mdListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { if (mediaQueryResult.matches) { - this.breakPoint = BreakPointsType.MD + this.breakPoint = BreakPointsType.MD; } }) this.lgListener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => { if (mediaQueryResult.matches) { - this.breakPoint = BreakPointsType.LG + this.breakPoint = BreakPointsType.LG; } }) } @@ -183,14 +194,17 @@ export struct CustomAppBar { onBreakPointChange(): void { if (this.windowWidth === 0) { let displayData = display.getDefaultDisplaySync(); - this.windowWidth = px2vp(displayData.width) + this.windowWidth = px2vp(displayData.width); this.windowHeight = px2vp(displayData.height); } + if (menuMarginEndMap.has(this.breakPoint)) { + this.menuMarginEnd = menuMarginEndMap.get(this.breakPoint) as number; + } if (this.isHalfScreen) { if (this.breakPoint === BreakPointsType.SM) { this.containerWidth = '100%'; } else if (this.breakPoint === BreakPointsType.MD) { - this.containerWidth = MD_WIDTH + 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; @@ -226,7 +240,7 @@ export struct CustomAppBar { return; } if (eventName === ARKUI_APP_BAR_COLOR_CONFIGURATION) { - this.onColorConfigurationUpdate(this.parseBoolean(param)) + this.onColorConfigurationUpdate(this.parseBoolean(param)); } else if (eventName === ARKUI_APP_BAR_MENU_SAFE_AREA) { if (this.statusBarHeight === px2vp(Number(param))) { return; @@ -475,7 +489,7 @@ export struct CustomAppBar { .id('AtomicServiceMenubarId') } .id('AtomicServiceMenubarRowId') - .margin({ top: this.statusBarHeight + MENU_MARGIN_TOP, left: VIEW_MARGIN_RIGHT, right: VIEW_MARGIN_RIGHT }) + .margin({ top: LengthMetrics.vp(this.statusBarHeight + MENU_MARGIN_TOP), end: LengthMetrics.vp(this.menuMarginEnd) }) .justifyContent(FlexAlign.End) .height(VIEW_HEIGHT) .hitTestBehavior(HitTestMode.Transparent) @@ -489,7 +503,7 @@ export struct CustomAppBar { Row() { Image(this.icon).height(ICON_SIZE).width(ICON_SIZE) .margin({ - start: LengthMetrics.vp(CHEVRON_MAIGIN) + start: LengthMetrics.vp(CHEVRON_MARGIN) }) Text(this.labelName) .fontSize(TITLE_FONT_SIZE) @@ -508,7 +522,7 @@ export struct CustomAppBar { SymbolGlyph($r('sys.symbol.chevron_right')) .height(CHEVRON_HEIGHT) .width(CHEVRON_WIDTH) - .margin({ start: LengthMetrics.vp(CHEVRON_MAIGIN), end: LengthMetrics.vp(CHEVRON_MAIGIN) }) + .margin({ start: LengthMetrics.vp(CHEVRON_MARGIN), end: LengthMetrics.vp(CHEVRON_MARGIN) }) .fontColor([Color.White]) } .height(EYELASH_HEIGHT)