From f60a9101944bd23e1a61d9bb2bd5aacc63f5d1e2 Mon Sep 17 00:00:00 2001 From: xj98 Date: Tue, 18 Feb 2025 13:47:53 +0000 Subject: [PATCH 1/3] =?UTF-8?q?feature:=20menubar=20margin=E9=80=82?= =?UTF-8?q?=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xj98 --- customappbar/interfaces/custom_app_bar.js | 32 ++++++++++++++++--- customappbar/source/custom_app_bar.ets | 39 +++++++++++++++-------- 2 files changed, 53 insertions(+), 18 deletions(-) diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js index f45a48c..f7612b6 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(0, 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,15 @@ export class CustomAppBar extends ViewPU { this.windowWidth = px2vp(displayData.width); this.windowHeight = px2vp(displayData.height); } + if (this.breakPoint === BreakPointsType.SM) { + this.menuMarginEnd = SM_MENU_MARGIN_END; + } + else if (this.breakPoint === BreakPointsType.MD) { + this.menuMarginEnd = MD_MENU_MARGIN_END; + } + else if (this.breakPoint === BreakPointsType.LG) { + this.menuMarginEnd = LG_MENU_MARGIN_END; + } if (this.isHalfScreen) { if (this.breakPoint === BreakPointsType.SM) { this.containerWidth = '100%'; @@ -750,7 +774,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 +897,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 +924,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(); diff --git a/customappbar/source/custom_app_bar.ets b/customappbar/source/custom_app_bar.ets index 462aaa2..4673c0d 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; @@ -118,6 +121,7 @@ export struct CustomAppBar { @State contentMarginLeft: number = 0; @State contentMarginRight: number = 0; @State contentMarginBottom: number = 0; + @State menuMarginEnd: number = 0; // 半屏参数 @State isHalfScreen: boolean = true; @State containerHeight: string | number = '0%'; @@ -132,7 +136,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 +145,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 +187,21 @@ 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 (this.breakPoint === BreakPointsType.SM) { + this.menuMarginEnd = SM_MENU_MARGIN_END; + } else if (this.breakPoint === BreakPointsType.MD) { + this.menuMarginEnd = MD_MENU_MARGIN_END; + } else if (this.breakPoint === BreakPointsType.LG) { + this.menuMarginEnd = LG_MENU_MARGIN_END; + } 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 +237,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 +486,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 +500,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 +519,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) -- Gitee From f7315bf849084888a975c503a6b80dae927a7040 Mon Sep 17 00:00:00 2001 From: xj98 Date: Wed, 19 Feb 2025 01:38:13 +0000 Subject: [PATCH 2/3] =?UTF-8?q?update=20customappbar/interfaces/custom=5Fa?= =?UTF-8?q?pp=5Fbar.js.=20=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xj98 --- customappbar/interfaces/custom_app_bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js index f7612b6..fde91c1 100644 --- a/customappbar/interfaces/custom_app_bar.js +++ b/customappbar/interfaces/custom_app_bar.js @@ -117,7 +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(0, this, "menuMarginEnd"); + this.__menuMarginEnd = new ObservedPropertySimplePU(0, this, 'menuMarginEnd'); this.__isHalfScreen = new ObservedPropertySimplePU(true, this, 'isHalfScreen'); this.__containerHeight = new ObservedPropertySimplePU('0%', this, 'containerHeight'); this.__containerWidth = new ObservedPropertySimplePU('100%', this, 'containerWidth'); -- Gitee From 1c42aeb645c438dda037e8ec580a643fe4dce3ad Mon Sep 17 00:00:00 2001 From: xj98 Date: Wed, 19 Feb 2025 07:52:30 +0000 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E6=94=B9menuBarMarginEnd=E9=BB=98?= =?UTF-8?q?=E8=AE=A4=E5=80=BC=EF=BC=8C=E5=B0=86menuBarMarginEnd=E5=80=BC?= =?UTF-8?q?=E4=B8=8E=E5=AF=B9=E5=BA=94=E6=96=AD=E7=82=B9=E7=BB=91=E5=AE=9A?= =?UTF-8?q?=E5=9C=A8map=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: xj98 --- customappbar/interfaces/custom_app_bar.js | 18 +++++++++--------- customappbar/source/custom_app_bar.ets | 17 ++++++++++------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/customappbar/interfaces/custom_app_bar.js b/customappbar/interfaces/custom_app_bar.js index fde91c1..142e315 100644 --- a/customappbar/interfaces/custom_app_bar.js +++ b/customappbar/interfaces/custom_app_bar.js @@ -117,7 +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(0, this, 'menuMarginEnd'); + 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'); @@ -537,14 +537,8 @@ export class CustomAppBar extends ViewPU { this.windowWidth = px2vp(displayData.width); this.windowHeight = px2vp(displayData.height); } - if (this.breakPoint === BreakPointsType.SM) { - this.menuMarginEnd = SM_MENU_MARGIN_END; - } - else if (this.breakPoint === BreakPointsType.MD) { - this.menuMarginEnd = MD_MENU_MARGIN_END; - } - else if (this.breakPoint === BreakPointsType.LG) { - this.menuMarginEnd = LG_MENU_MARGIN_END; + if (menuMarginEndMap.has(this.breakPoint)) { + this.menuMarginEnd = menuMarginEndMap.get(this.breakPoint); } if (this.isHalfScreen) { if (this.breakPoint === BreakPointsType.SM) { @@ -1129,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 4673c0d..b426bf8 100644 --- a/customappbar/source/custom_app_bar.ets +++ b/customappbar/source/custom_app_bar.ets @@ -85,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')], @@ -121,7 +128,7 @@ export struct CustomAppBar { @State contentMarginLeft: number = 0; @State contentMarginRight: number = 0; @State contentMarginBottom: number = 0; - @State menuMarginEnd: number = 0; + @State menuMarginEnd: number = SM_MENU_MARGIN_END; // 半屏参数 @State isHalfScreen: boolean = true; @State containerHeight: string | number = '0%'; @@ -190,12 +197,8 @@ export struct CustomAppBar { this.windowWidth = px2vp(displayData.width); this.windowHeight = px2vp(displayData.height); } - if (this.breakPoint === BreakPointsType.SM) { - this.menuMarginEnd = SM_MENU_MARGIN_END; - } else if (this.breakPoint === BreakPointsType.MD) { - this.menuMarginEnd = MD_MENU_MARGIN_END; - } else if (this.breakPoint === BreakPointsType.LG) { - this.menuMarginEnd = LG_MENU_MARGIN_END; + if (menuMarginEndMap.has(this.breakPoint)) { + this.menuMarginEnd = menuMarginEndMap.get(this.breakPoint) as number; } if (this.isHalfScreen) { if (this.breakPoint === BreakPointsType.SM) { -- Gitee