From 6654075950e35bb57557b832f9a77e04e06d0f5d Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Wed, 19 Feb 2025 19:51:29 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 528 ++++++------------ .../source/atomicservicenavigation.ets | 11 + 2 files changed, 172 insertions(+), 367 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index b129314..49bee02 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -1,26 +1,17 @@ -/* - * Copyright (c) 2024 Huawei Device Co., Ltd. - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -if (!('finalizeConstruction' in ViewPU.prototype)) { - Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { - }); +var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); + else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + return c > 3 && r && Object.defineProperty(target, key, r), r; +}; +if (!("finalizeConstruction" in ViewPU.prototype)) { + Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } -const curves = requireNativeModule('ohos.curves'); -const LengthMetrics = requireNapi('arkui.node').LengthMetrics; -const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; -const bundleManager = requireNapi('bundle.bundleManager'); -const hilog = requireNapi('hilog'); +import curves from "@ohos.curves"; +import { LengthMetrics as LengthMetrics } from "@ohos.arkui.node"; +import { SymbolGlyphModifier as SymbolGlyphModifier } from "@ohos.arkui.modifier"; +import bundleManager from "@ohos.bundle.bundleManager"; +import hilog from "@ohos.hilog"; /** * 背景渐变色相关数据 */ @@ -50,101 +41,97 @@ const SIDE_BAR_OVERLAY_WIDTH = 304; const SIDE_BAR_COMMON_WIDTH = 360; const CONTENT_MIN_WIDTH = 600; const ATOMIC_SERVICE_CAPSULE_WIDTH = 81.5; - /** * 背景颜色的不透明度的枚举类型 * * @enum { number }. */ -export let GradientAlpha; +export var GradientAlpha; (function (GradientAlpha) { /** * 不透明度为0.2 * */ - GradientAlpha.OPACITY_20 = 1; + GradientAlpha[GradientAlpha["OPACITY_20"] = 1] = "OPACITY_20"; /** * 不透明度为0.6 * */ - GradientAlpha.OPACITY_60 = 2; + GradientAlpha[GradientAlpha["OPACITY_60"] = 2] = "OPACITY_60"; /** * 不透明度为0.8 */ - GradientAlpha.OPACITY_80 = 3; + GradientAlpha[GradientAlpha["OPACITY_80"] = 3] = "OPACITY_80"; /** * 不透明度为1.0 */ - GradientAlpha.OPACITY_100 = 4; + GradientAlpha[GradientAlpha["OPACITY_100"] = 4] = "OPACITY_100"; })(GradientAlpha || (GradientAlpha = {})); - /** * 背景颜色融合方式 * * @enum { number }. */ -export let MixMode; +export var MixMode; (function (MixMode) { /** * 两种颜色所占比例相同 */ - MixMode.AVERAGE = 1; + MixMode[MixMode["AVERAGE"] = 1] = "AVERAGE"; /** * 一种颜色穿过另一种颜色 */ - MixMode.CROSS = 2; + MixMode[MixMode["CROSS"] = 2] = "CROSS"; /** * 一种颜色渐渐转变为另一种颜色 */ - MixMode.TOWARDS = 3; + MixMode[MixMode["TOWARDS"] = 3] = "TOWARDS"; })(MixMode || (MixMode = {})); - /** * 背景底色 * * @enum { number }. */ -export let BackgroundTheme; +export var BackgroundTheme; (function (BackgroundTheme) { /** * 黑色 */ - BackgroundTheme.DARK = 1; + BackgroundTheme[BackgroundTheme["DARK"] = 1] = "DARK"; /** * 白色 */ - BackgroundTheme.LIGHT = 2; + BackgroundTheme[BackgroundTheme["LIGHT"] = 2] = "LIGHT"; /** * 颜色值 #F1F3F5 */ - BackgroundTheme.DEFAULT = 3; + BackgroundTheme[BackgroundTheme["DEFAULT"] = 3] = "DEFAULT"; })(BackgroundTheme || (BackgroundTheme = {})); - export class AtomicServiceNavigation extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); - if (typeof paramsLambda === 'function') { + if (typeof paramsLambda === "function") { this.paramsGenerator_ = paramsLambda; } - this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, 'navPathStack'); + this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack"); this.navigationContent = undefined; - this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, 'title'); - this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, 'titleOptions'); - this.__gradientBackground = - new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); - this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, 'hideTitleBar'); - this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, 'navBarWidth'); - this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, 'mode'); + this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, "title"); + this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, "titleOptions"); + this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, "gradientBackground"); + this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, "hideTitleBar"); + this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, "navBarWidth"); + this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, "mode"); this.navDestinationBuilder = this.defaultNavDestinationBuilder; - this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, 'navBarWidthRange'); - this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, 'minContentWidth'); - this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, 'sideBarOptions'); + this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, "navBarWidthRange"); + this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, "minContentWidth"); + this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, "sideBarOptions"); this.sideBarContent = undefined; - this.__showMaskLayer = new ObservedPropertySimplePU(false, this, 'showMaskLayer'); - this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, 'marginWindowLeft'); - this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, 'currentBreakPoint'); - this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, 'sideBarAttribute'); - this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, 'controlButtonVisible'); + this.__showMaskLayer = new ObservedPropertySimplePU(false, this, "showMaskLayer"); + this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, "marginWindowLeft"); + this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, "currentBreakPoint"); + this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, "sideBarAttribute"); + this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, "controlButtonVisible"); + this.menus = undefined; this.stateChangeCallback = undefined; this.modeChangeCallback = undefined; this.settings = new RenderingContextSettings(true); @@ -160,7 +147,6 @@ export class AtomicServiceNavigation extends ViewPU { this.setInitiallyProvidedValue(params); this.finalizeConstruction(); } - setInitiallyProvidedValue(params) { if (params.navPathStack !== undefined) { this.navPathStack = params.navPathStack; @@ -192,6 +178,9 @@ export class AtomicServiceNavigation extends ViewPU { if (params.controlButtonVisible !== undefined) { this.controlButtonVisible = params.controlButtonVisible; } + if (params.menus !== undefined) { + this.menus = params.menus; + } if (params.stateChangeCallback !== undefined) { this.stateChangeCallback = params.stateChangeCallback; } @@ -229,7 +218,6 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationBarVisibility = params.navigationBarVisibility; } } - updateStateVars(params) { this.__title.reset(params.title); this.__titleOptions.reset(params.titleOptions); @@ -241,7 +229,6 @@ export class AtomicServiceNavigation extends ViewPU { this.__minContentWidth.reset(params.minContentWidth); this.__sideBarOptions.reset(params.sideBarOptions); } - purgeVariableDependenciesOnElmtId(rmElmtId) { this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); this.__title.purgeDependencyOnElmtId(rmElmtId); @@ -259,7 +246,6 @@ export class AtomicServiceNavigation extends ViewPU { this.__sideBarAttribute.purgeDependencyOnElmtId(rmElmtId); this.__controlButtonVisible.purgeDependencyOnElmtId(rmElmtId); } - aboutToBeDeleted() { this.__navPathStack.aboutToBeDeleted(); this.__title.aboutToBeDeleted(); @@ -279,173 +265,137 @@ export class AtomicServiceNavigation extends ViewPU { SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } - get navPathStack() { return this.__navPathStack.get(); } - set navPathStack(newValue) { this.__navPathStack.set(newValue); } - get title() { return this.__title.get(); } - set title(newValue) { this.__title.set(newValue); } - get titleOptions() { return this.__titleOptions.get(); } - set titleOptions(newValue) { this.__titleOptions.set(newValue); } - get gradientBackground() { return this.__gradientBackground.get(); } - set gradientBackground(newValue) { this.__gradientBackground.set(newValue); } - get hideTitleBar() { return this.__hideTitleBar.get(); } - set hideTitleBar(newValue) { this.__hideTitleBar.set(newValue); } - get navBarWidth() { return this.__navBarWidth.get(); } - set navBarWidth(newValue) { this.__navBarWidth.set(newValue); } - get mode() { return this.__mode.get(); } - set mode(newValue) { this.__mode.set(newValue); } - get navBarWidthRange() { return this.__navBarWidthRange.get(); } - set navBarWidthRange(newValue) { this.__navBarWidthRange.set(newValue); } - get minContentWidth() { return this.__minContentWidth.get(); } - set minContentWidth(newValue) { this.__minContentWidth.set(newValue); } - get sideBarOptions() { return this.__sideBarOptions.get(); } - set sideBarOptions(newValue) { this.__sideBarOptions.set(newValue); } - get showMaskLayer() { return this.__showMaskLayer.get(); } - set showMaskLayer(newValue) { this.__showMaskLayer.set(newValue); } - get marginWindowLeft() { return this.__marginWindowLeft.get(); } - set marginWindowLeft(newValue) { this.__marginWindowLeft.set(newValue); } - get currentBreakPoint() { return this.__currentBreakPoint.get(); } - set currentBreakPoint(newValue) { this.__currentBreakPoint.set(newValue); } - get sideBarAttribute() { return this.__sideBarAttribute.get(); } - set sideBarAttribute(newValue) { this.__sideBarAttribute.set(newValue); } - get controlButtonVisible() { return this.__controlButtonVisible.get(); } - set controlButtonVisible(newValue) { this.__controlButtonVisible.set(newValue); } - defaultNavDestinationBuilder(name, param, parent = null) { } - BackgroundBuilder(gradientBackground, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Canvas.create(this.context); Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : - gradientBackground.alpha]); + gradientBackground.alpha]); Canvas.blur(BLUR_CONSTANT); Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : - backGroundColor[gradientBackground.backgroundTheme - 1]); + backGroundColor[gradientBackground.backgroundTheme - 1]); Canvas.onReady(() => { if (gradientBackground.secondaryColor === undefined) { //单色渐变 - this.drawSingleGradient(this.context, gradientBackground.primaryColor, - gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : + this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); - } else { + } + else { if (gradientBackground.mixMode === MixMode.AVERAGE) { //双色渐变五五分 - this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); - } else if (gradientBackground.mixMode === MixMode.CROSS) { + this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); + } + else if (gradientBackground.mixMode === MixMode.CROSS) { //第一种双色渐变三七分 - this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); - } else { + this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); + } + else { //第二种双色渐变三七分 - this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, - gradientBackground.secondaryColor); + this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); } - this.drawTransparentGradient(this.context, - gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : + this.drawTransparentGradient(this.context, gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : gradientBackground.backgroundTheme); } }); }, Canvas); Canvas.pop(); } - aboutToAppear() { this.initWindow(); this.initIcon(); this.initSideBarAttr(); } - /** * 初始化侧边栏相关信息 */ @@ -464,7 +414,6 @@ export class AtomicServiceNavigation extends ViewPU { }; this.sideBarHelper.registerListener(sideBarStatusListener); } - /** * 初始化window，并设置windowSizeChange监听，更新断点信息 */ @@ -487,7 +436,6 @@ export class AtomicServiceNavigation extends ViewPU { console.error(`AtomicServiceNavigation get main window failed, message is ${err?.message}`); }); } - /** * 初始化icon，用户如果设置了则用自定义的icon，没有设置则用元服务图标 */ @@ -501,7 +449,6 @@ export class AtomicServiceNavigation extends ViewPU { let iconRes = bundleInfo?.appInfo?.iconResource; this.atomicServiceIcon = getContext(this)?.resourceManager?.getDrawableDescriptor(iconRes)?.getPixelMap(); } - /** * 更新断点信息 */ @@ -513,9 +460,11 @@ export class AtomicServiceNavigation extends ViewPU { let newBreakPoint = ''; if (widthVp < BREAK_POINT_VP_SM) { newBreakPoint = BREAK_POINT_SM; - } else if (widthVp < BREAK_POINT_VP_MD) { + } + else if (widthVp < BREAK_POINT_VP_MD) { newBreakPoint = BREAK_POINT_MD; - } else { + } + else { newBreakPoint = BREAK_POINT_LG; } if (this.currentBreakPoint !== newBreakPoint) { @@ -526,7 +475,6 @@ export class AtomicServiceNavigation extends ViewPU { } } } - /** * 更新边距 */ @@ -544,13 +492,11 @@ export class AtomicServiceNavigation extends ViewPU { break; } } - aboutToDisappear() { if (this.onWindowSizeChangeCallback) { this.mainWindow?.off('windowSizeChange', this.onWindowSizeChangeCallback); } } - /** * 更新control button的可见性 */ @@ -573,18 +519,19 @@ export class AtomicServiceNavigation extends ViewPU { if (this.controlButtonVisible) { this.controlButtonVisible = false; } - } else { + } + else { if (!this.controlButtonVisible) { this.controlButtonVisible = true; } } - } else { + } + else { if (this.controlButtonVisible !== this.navigationBarVisibility) { this.controlButtonVisible = this.navigationBarVisibility; } } } - drawerTitleBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -593,17 +540,14 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); Row.padding({ - start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? - this.marginWindowLeft + 36 + 8 : + start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? this.marginWindowLeft + 36 + 8 : (this.sideBarAttribute.showSideBar ? 8 : this.marginWindowLeft + 36 + 8)), top: LengthMetrics.vp(10), bottom: LengthMetrics.vp(10), // 在Stack模式，或者非分栏模式下右侧需要有一定padding值，避免超长文本时不能避让menuBar - end: ((this.currentBreakPoint === BREAK_POINT_SM && - (this.mode === NavigationMode.Auto || !this.mode)) || - this.mode === NavigationMode.Stack) ? - LengthMetrics.vp(ATOMIC_SERVICE_CAPSULE_WIDTH + 16) : - LengthMetrics.vp(0) + end: ((this.currentBreakPoint === BREAK_POINT_SM && (this.mode === NavigationMode.Auto || !this.mode)) || + this.mode === NavigationMode.Stack) ? LengthMetrics.vp(ATOMIC_SERVICE_CAPSULE_WIDTH + 16) : + LengthMetrics.vp(0) }); Row.width('100%'); }, Row); @@ -613,13 +557,7 @@ export class AtomicServiceNavigation extends ViewPU { Text.minFontSize(14); Text.maxFontSize(26); Text.height(36); - Text.fontColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.font_primary'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Text.fontColor({ "id": -1, "type": 10001, params: ['sys.color.font_primary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.fontWeight(FontWeight.Bold); Text.width(0); @@ -629,25 +567,19 @@ export class AtomicServiceNavigation extends ViewPU { Text.pop(); Row.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } }, If); If.pop(); } - maskLayer(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Column.create(); Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Column.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_mask_thin'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Column.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_mask_thin'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); Column.width('100%'); Column.height('100%'); @@ -655,7 +587,6 @@ export class AtomicServiceNavigation extends ViewPU { }, Column); Column.pop(); } - controlButton(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -667,13 +598,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -693,42 +618,19 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ - 'id': -1, - 'type': 40000, - params: ['sys.symbol.open_sidebar'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.open_sidebar'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ - 'id': -1, - 'type': 10002, - params: ['sys.float.ohos_id_text_size_headline7'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); - SymbolGlyph.fontColor([{ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_titlebar_icon'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }]); + SymbolGlyph.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_headline7'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + SymbolGlyph.fontColor([{ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }]); }, SymbolGlyph); Button.pop(); }); - } else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { + } + else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -753,17 +655,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.sideBarOptions?.sideBarIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -787,7 +684,8 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -795,13 +693,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -821,42 +713,19 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ - 'id': -1, - 'type': 40000, - params: ['sys.symbol.close_sidebar'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.close_sidebar'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ - 'id': -1, - 'type': 10002, - params: ['sys.float.ohos_id_text_size_headline7'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); - SymbolGlyph.fontColor([{ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_titlebar_icon'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }]); + SymbolGlyph.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_headline7'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + SymbolGlyph.fontColor([{ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }]); }, SymbolGlyph); Button.pop(); }); - } else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { + } + else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -881,17 +750,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -919,41 +783,26 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - sideBar(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { Row.create(); - Row.border({ - width: { + Row.border({ width: { left: 0, right: '1px', top: 0, bottom: 0 }, - color: { - 'id': -1, - 'type': 10001, - params: ['sys.color.comp_divider'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }, + color: { "id": -1, "type": 10001, params: ['sys.color.comp_divider'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, style: { right: BorderStyle.Solid - } - }); + } }); Row.alignItems(VerticalAlign.Top); Row.width('100%'); Row.height('100%'); Row.padding({ top: 56 }); Row.focusable(true); Row.defaultFocus(true); - Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_sub_background'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_sub_background'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -962,7 +811,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.sideBarContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -970,7 +820,6 @@ export class AtomicServiceNavigation extends ViewPU { If.pop(); Row.pop(); } - roundIconBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -978,13 +827,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -1007,17 +850,12 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); - Image.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -1039,7 +877,6 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - longIconBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -1047,13 +884,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild(); - Button.backgroundColor({ - 'id': -1, - 'type': 10001, - params: ['sys.color.ohos_id_color_button_normal'], - 'bundleName': '__harDefaultBundleName__', - 'moduleName': '__harDefaultModuleName__' - }); + Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); Button.width(36); Button.height(36); Button.margin({ @@ -1074,7 +905,8 @@ export class AtomicServiceNavigation extends ViewPU { }, SymbolGlyph); Button.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); @@ -1097,7 +929,6 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - titleBuilder(parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); @@ -1105,7 +936,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.longIconBuilder.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.roundIconBuilder.bind(this)(); }); @@ -1113,23 +945,20 @@ export class AtomicServiceNavigation extends ViewPU { }, If); If.pop(); } - + isShowMenus() { + return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; + } + MenuItemArray() { + return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; + } initialRender() { this.observeComponentCreation2((elmtId, isInitialRender) => { Stack.create(); Stack.width('100%'); Stack.height('100%'); - Stack.background(this.gradientBackground === undefined ? undefined : { - builder: () => { - this.BackgroundBuilder.call(this, makeBuilderParameterProxy('BackgroundBuilder', { - primaryColor: () => this.gradientBackground.primaryColor, - secondaryColor: () => this.gradientBackground.secondaryColor, - backgroundTheme: () => this.gradientBackground.backgroundTheme, - mixMode: () => this.gradientBackground.mixMode, - alpha: () => this.gradientBackground.alpha - })); - } - }); + Stack.background(this.gradientBackground === undefined ? undefined : { builder: () => { + this.BackgroundBuilder.call(this, makeBuilderParameterProxy("BackgroundBuilder", { primaryColor: () => this.gradientBackground.primaryColor, secondaryColor: () => this.gradientBackground.secondaryColor, backgroundTheme: () => this.gradientBackground.backgroundTheme, mixMode: () => this.gradientBackground.mixMode, alpha: () => this.gradientBackground.alpha })); + } }); Stack.onSizeChange((oldValue, newValue) => { this.navigationWidth = newValue.width; this.navigationHeight = newValue.height; @@ -1144,7 +973,7 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.create(this.currentBreakPoint === BREAK_POINT_LG ? SideBarContainerType.Embed : - SideBarContainerType.Overlay); + SideBarContainerType.Overlay); // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 @@ -1172,14 +1001,14 @@ export class AtomicServiceNavigation extends ViewPU { Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, - { moduleName: 'library', pagePath: '', isUserCreateStack: true }); + Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); Navigation.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Navigation.title({ - builder: () => { + Navigation.title({ builder: () => { this.drawerTitleBuilder.call(this); - } - }, this.getTitleOption()); + } }, this.getTitleOption()); + Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { + this.menus.call(this); + } } : this.MenuItemArray()); Navigation.titleMode(NavigationTitleMode.Mini); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); @@ -1204,7 +1033,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.navigationContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1213,13 +1043,13 @@ export class AtomicServiceNavigation extends ViewPU { Navigation.pop(); this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); - if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && - this.sideBarAttribute.showSideBar && + if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.sideBarAttribute.showSideBar && this.currentBreakPoint !== BREAK_POINT_LG && this.showMaskLayer) { this.ifElseBranchUpdateFunction(0, () => { this.maskLayer.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1229,18 +1059,18 @@ export class AtomicServiceNavigation extends ViewPU { // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 SideBarContainer.pop(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, - { moduleName: 'library', pagePath: '', isUserCreateStack: true }); - Navigation.title((this.titleOptions?.titleIcon || - (this.titleOptions?.titleBarType && !this.title)) ? { - builder: () => { + Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); + Navigation.title((this.titleOptions?.titleIcon || (this.titleOptions?.titleBarType && !this.title)) ? { builder: () => { this.titleBuilder.call(this); - } - } : this.title, this.getTitleOption()); + } } : this.title, this.getTitleOption()); Navigation.titleMode(NavigationTitleMode.Mini); + Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { + this.menus.call(this); + } } : this.MenuItemArray()); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); @@ -1258,7 +1088,8 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.navigationContent.bind(this)(); }); - } else { + } + else { this.ifElseBranchUpdateFunction(1, () => { }); } @@ -1271,7 +1102,6 @@ export class AtomicServiceNavigation extends ViewPU { If.pop(); Stack.pop(); } - /** * 双色渐变下两种颜色各占50%的实现，把整个画布区域分为两个一样的矩形在绘制 * @param context 画布上下文 @@ -1280,11 +1110,8 @@ export class AtomicServiceNavigation extends ViewPU { */ drawGradientCanvasHalf(context, primaryColor, secondaryColor) { let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; - let grad1 = - context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, - height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); - let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, - this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); + let grad1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); + let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); grad1.addColorStop(0, this.resourceColorToString(primaryColor)); grad1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); grad1.addColorStop(1, this.resourceColorToString(secondaryColor)); @@ -1296,7 +1123,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillStyle = grad2; context.fillRect(this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0, this.navigationWidth, height); } - /** * 双色渐变的一种实现，把画布先分为两个大矩形，再把其中一个矩形分为两个小矩形 * @param context 画布上下文 @@ -1313,31 +1139,21 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, height); let y1 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : 0; - let grad2 = - context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, - height * COLOR_RATIO_FIFTY_PERCENT); + let grad2 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); grad2.addColorStop(0, this.resourceColorToString(secondaryColor)); grad2.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad2.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad2; - context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, - this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, - height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); + context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; - let grad3 = - context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, - height * COLOR_RATIO_FIFTY_PERCENT); + let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); grad3.addColorStop(0, this.resourceColorToString(secondaryColor)); grad3.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad3.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad3; - context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, - height * COLOR_RATIO_FIFTY_PERCENT, - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, - height * COLOR_RATIO_FIFTY_PERCENT); + context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT); } - /** * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角 * @param context 画布上下文 @@ -1353,7 +1169,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillStyle = grad; context.fillRect(0, 0, this.navigationWidth, height); } - /** * 双色渐变下透明效果的实现 * @param context 画布上下文 @@ -1372,7 +1187,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, height, this.navigationWidth, this.navigationHeight - height); } } - /** * 单色渐变： * @param context 画布上下文 @@ -1392,7 +1206,6 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, height, this.navigationWidth, this.navigationHeight * (1 - COLOR_RATIO_SIXTY_PERCENT)); } } - /** * ResourceColor转化为能作为addColorStop使用的字符串 * @param resource ResourceColor = Color | number | string | Resource,对于Resource转化为直接使用的字符串需要特殊处理 @@ -1402,18 +1215,18 @@ export class AtomicServiceNavigation extends ViewPU { if (typeof resource === 'object') { try { return getContext(this).resourceManager.getStringSync(resource); - } catch (error) { + } + catch (error) { let code = error.code; let message = error.message; - hilog.error(0x0000, 'AtomicServiceNavigation', - `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); + hilog.error(0x0000, 'AtomicServiceNavigation', `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); } return ''; - } else { + } + else { return resource.toString(); } } - /** * 获取NavigationTitleOptions */ @@ -1424,7 +1237,6 @@ export class AtomicServiceNavigation extends ViewPU { barStyle: this.titleOptions?.barStyle }; } - /** * 更新control button的可见性，并运行动画效果 */ @@ -1442,7 +1254,6 @@ export class AtomicServiceNavigation extends ViewPU { this.showMaskLayer = true; }); } - rerender() { this.updateDirtyElements(); } @@ -1477,7 +1288,6 @@ let sideBarAttributeSet = class sideBarAttributeSet { sideBarAttributeSet = __decorate([ Observed ], sideBarAttributeSet); - /** * 侧边栏辅助管理类 */ @@ -1485,7 +1295,6 @@ class SideBarHelper { constructor() { this.isExpandSideBar = false; } - /** * 注册侧边栏显隐状态变化监听 * @@ -1494,14 +1303,12 @@ class SideBarHelper { registerListener(listener) { this.listener = listener; } - /** * 取消注册监听 */ unregisterListener() { this.listener = undefined; } - /** * 获取侧边栏显示隐藏状态 * @@ -1510,7 +1317,6 @@ class SideBarHelper { isShowSideBar() { return this.isExpandSideBar; } - /** * 设置侧边栏显示隐藏状态 * @@ -1522,7 +1328,6 @@ class SideBarHelper { this.listener(value); } } - /** * 更新侧边栏布局 * @@ -1532,11 +1337,11 @@ class SideBarHelper { updateLayout(breakPoint, layout) { if (breakPoint === BREAK_POINT_LG) { this.updateLGLayout(layout); - } else { + } + else { this.updateCommonLayout(layout); } } - /** * 更新除LG外窗口模式的布局 */ @@ -1544,7 +1349,6 @@ class SideBarHelper { layout.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; layout.minContentWidthOfSideBar = '100%'; } - /** * 更新LG窗口模式布局 */ @@ -1553,32 +1357,22 @@ class SideBarHelper { layout.minContentWidthOfSideBar = CONTENT_MIN_WIDTH; } } - /** * 标题栏类型 */ -export let TitleBarType; +export var TitleBarType; (function (TitleBarType) { /** * 长图标类型标题栏 */ - TitleBarType.SQUARED_ICON = 1; + TitleBarType[TitleBarType["SQUARED_ICON"] = 1] = "SQUARED_ICON"; /** * 圆形图标类型标题栏 */ - TitleBarType.ROUND_ICON = 2; + TitleBarType[TitleBarType["ROUND_ICON"] = 2] = "ROUND_ICON"; /** * 抽屉类型标题栏 */ - TitleBarType.DRAWER = 3; + TitleBarType[TitleBarType["DRAWER"] = 3] = "DRAWER"; })(TitleBarType || (TitleBarType = {})); - -//# sourceMappingURL=AtomicServiceNavigation.js.map - -export default { - AtomicServiceNavigation, - MixMode, - GradientAlpha, - BackgroundTheme, - TitleBarType -}; \ No newline at end of file +//# sourceMappingURL=MainPage.js.map \ No newline at end of file diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index d9dff7c..ea8385e 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -135,6 +135,7 @@ export struct AtomicServiceNavigation { @State private currentBreakPoint: string = BREAK_POINT_SM; @State private sideBarAttribute: sideBarAttributeSet = new sideBarAttributeSet(); @State private controlButtonVisible: boolean = true; + @BuilderParam menus?: CustomBuilder | Array; stateChangeCallback?: Callback; modeChangeCallback?: Callback; @@ -548,6 +549,14 @@ export struct AtomicServiceNavigation { } } + private isShowMenus(): boolean { + return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; + } + + private MenuItemArray(): undefined | Array { + return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; + } + build() { Stack() { if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { @@ -566,6 +575,7 @@ export struct AtomicServiceNavigation { } .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) .title(this.drawerTitleBuilder(), this.getTitleOption()) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.MenuItemArray()) .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) @@ -613,6 +623,7 @@ export struct AtomicServiceNavigation { this.title, this.getTitleOption()) .titleMode(NavigationTitleMode.Mini) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.MenuItemArray()) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) .navBarWidth(this.navBarWidth) -- Gitee From 23c366f2f10af767754f263ff33da73b5793d7da Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Wed, 19 Feb 2025 20:18:23 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 6 +++--- atomicservicenavigation/source/atomicservicenavigation.ets | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 49bee02..7225a79 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -948,7 +948,7 @@ export class AtomicServiceNavigation extends ViewPU { isShowMenus() { return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; } - MenuItemArray() { + getMenuItemArray() { return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; } initialRender() { @@ -1008,7 +1008,7 @@ export class AtomicServiceNavigation extends ViewPU { } }, this.getTitleOption()); Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { this.menus.call(this); - } } : this.MenuItemArray()); + } } : this.getMenuItemArray()); Navigation.titleMode(NavigationTitleMode.Mini); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); @@ -1070,7 +1070,7 @@ export class AtomicServiceNavigation extends ViewPU { Navigation.titleMode(NavigationTitleMode.Mini); Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { this.menus.call(this); - } } : this.MenuItemArray()); + } } : this.getMenuItemArray()); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index ea8385e..95650eb 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -553,7 +553,7 @@ export struct AtomicServiceNavigation { return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; } - private MenuItemArray(): undefined | Array { + private getMenuItemArray(): undefined | Array { return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; } @@ -575,7 +575,7 @@ export struct AtomicServiceNavigation { } .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) .title(this.drawerTitleBuilder(), this.getTitleOption()) - .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.MenuItemArray()) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.getMenuItemArray()) .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) @@ -623,7 +623,7 @@ export struct AtomicServiceNavigation { this.title, this.getTitleOption()) .titleMode(NavigationTitleMode.Mini) - .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.MenuItemArray()) + .menus(this.isShowMenus() && this.menus instanceof Function ? this.menus() : this.getMenuItemArray()) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) .navBarWidth(this.navBarWidth) -- Gitee From d17286e116c6abc080a3f51c3a7312b8d0478256 Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Wed, 19 Feb 2025 20:22:47 +0800 Subject: [PATCH 3/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 7225a79..9655586 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -1,3 +1,17 @@ +/* + * Copyright (c) 2024 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); @@ -7,11 +21,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } -import curves from "@ohos.curves"; -import { LengthMetrics as LengthMetrics } from "@ohos.arkui.node"; -import { SymbolGlyphModifier as SymbolGlyphModifier } from "@ohos.arkui.modifier"; -import bundleManager from "@ohos.bundle.bundleManager"; -import hilog from "@ohos.hilog"; +const curves = requireNativeModule('ohos.curves'); +const LengthMetrics = requireNapi('arkui.node').LengthMetrics; +const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; +const bundleManager = requireNapi('bundle.bundleManager'); +const hilog = requireNapi('hilog'); /** * 背景渐变色相关数据 */ -- Gitee From b240c76b66f2770bcb4717aa236e85ee39ff18c8 Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Thu, 20 Feb 2025 09:40:45 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 126 +++++++++--------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 9655586..583932e 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -12,14 +12,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); - else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; +let __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { + let c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; + if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') r = Reflect.decorate(decorators, target, key, desc); + else for (let i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; }; -if (!("finalizeConstruction" in ViewPU.prototype)) { - Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); +if (!('finalizeConstruction' in ViewPU.prototype)) { + Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); } const curves = requireNativeModule('ohos.curves'); const LengthMetrics = requireNapi('arkui.node').LengthMetrics; @@ -60,91 +60,91 @@ const ATOMIC_SERVICE_CAPSULE_WIDTH = 81.5; * * @enum { number }. */ -export var GradientAlpha; +export let GradientAlpha; (function (GradientAlpha) { /** * 不透明度为0.2 * */ - GradientAlpha[GradientAlpha["OPACITY_20"] = 1] = "OPACITY_20"; + GradientAlpha[GradientAlpha['OPACITY_20'] = 1] = 'OPACITY_20'; /** * 不透明度为0.6 * */ - GradientAlpha[GradientAlpha["OPACITY_60"] = 2] = "OPACITY_60"; + GradientAlpha[GradientAlpha['OPACITY_60'] = 2] = 'OPACITY_60'; /** * 不透明度为0.8 */ - GradientAlpha[GradientAlpha["OPACITY_80"] = 3] = "OPACITY_80"; + GradientAlpha[GradientAlpha['OPACITY_80'] = 3] = 'OPACITY_80'; /** * 不透明度为1.0 */ - GradientAlpha[GradientAlpha["OPACITY_100"] = 4] = "OPACITY_100"; + GradientAlpha[GradientAlpha['OPACITY_100'] = 4] = 'OPACITY_100'; })(GradientAlpha || (GradientAlpha = {})); /** * 背景颜色融合方式 * * @enum { number }. */ -export var MixMode; +export let MixMode; (function (MixMode) { /** * 两种颜色所占比例相同 */ - MixMode[MixMode["AVERAGE"] = 1] = "AVERAGE"; + MixMode[MixMode['AVERAGE'] = 1] = 'AVERAGE'; /** * 一种颜色穿过另一种颜色 */ - MixMode[MixMode["CROSS"] = 2] = "CROSS"; + MixMode[MixMode['CROSS'] = 2] = 'CROSS'; /** * 一种颜色渐渐转变为另一种颜色 */ - MixMode[MixMode["TOWARDS"] = 3] = "TOWARDS"; + MixMode[MixMode['TOWARDS'] = 3] = 'TOWARDS'; })(MixMode || (MixMode = {})); /** * 背景底色 * * @enum { number }. */ -export var BackgroundTheme; +export let BackgroundTheme; (function (BackgroundTheme) { /** * 黑色 */ - BackgroundTheme[BackgroundTheme["DARK"] = 1] = "DARK"; + BackgroundTheme[BackgroundTheme['DARK'] = 1] = 'DARK'; /** * 白色 */ - BackgroundTheme[BackgroundTheme["LIGHT"] = 2] = "LIGHT"; + BackgroundTheme[BackgroundTheme['LIGHT'] = 2] = 'LIGHT'; /** * 颜色值 #F1F3F5 */ - BackgroundTheme[BackgroundTheme["DEFAULT"] = 3] = "DEFAULT"; + BackgroundTheme[BackgroundTheme['DEFAULT'] = 3] = 'DEFAULT'; })(BackgroundTheme || (BackgroundTheme = {})); export class AtomicServiceNavigation extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { super(parent, __localStorage, elmtId, extraInfo); - if (typeof paramsLambda === "function") { + if (typeof paramsLambda === 'function') { this.paramsGenerator_ = paramsLambda; } - this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack"); + this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, 'navPathStack'); this.navigationContent = undefined; - this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, "title"); - this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, "titleOptions"); - this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, "gradientBackground"); - this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, "hideTitleBar"); - this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, "navBarWidth"); - this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, "mode"); + this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, 'title'); + this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, 'titleOptions'); + this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); + this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, 'hideTitleBar'); + this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, 'navBarWidth'); + this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, 'mode'); this.navDestinationBuilder = this.defaultNavDestinationBuilder; - this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, "navBarWidthRange"); - this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, "minContentWidth"); - this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, "sideBarOptions"); + this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, 'navBarWidthRange'); + this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, 'minContentWidth'); + this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, 'sideBarOptions'); this.sideBarContent = undefined; - this.__showMaskLayer = new ObservedPropertySimplePU(false, this, "showMaskLayer"); - this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, "marginWindowLeft"); - this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, "currentBreakPoint"); - this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, "sideBarAttribute"); - this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, "controlButtonVisible"); + this.__showMaskLayer = new ObservedPropertySimplePU(false, this, 'showMaskLayer'); + this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, 'marginWindowLeft'); + this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, 'currentBreakPoint'); + this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, 'sideBarAttribute'); + this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, 'controlButtonVisible'); this.menus = undefined; this.stateChangeCallback = undefined; this.modeChangeCallback = undefined; @@ -232,7 +232,7 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationBarVisibility = params.navigationBarVisibility; } } - updateStateVars(params) { + updateStatelets(params) { this.__title.reset(params.title); this.__titleOptions.reset(params.titleOptions); this.__gradientBackground.reset(params.gradientBackground); @@ -243,7 +243,7 @@ export class AtomicServiceNavigation extends ViewPU { this.__minContentWidth.reset(params.minContentWidth); this.__sideBarOptions.reset(params.sideBarOptions); } - purgeVariableDependenciesOnElmtId(rmElmtId) { + purgeletiableDependenciesOnElmtId(rmElmtId) { this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); this.__title.purgeDependencyOnElmtId(rmElmtId); this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); @@ -571,7 +571,7 @@ export class AtomicServiceNavigation extends ViewPU { Text.minFontSize(14); Text.maxFontSize(26); Text.height(36); - Text.fontColor({ "id": -1, "type": 10001, params: ['sys.color.font_primary'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Text.textOverflow({ overflow: TextOverflow.Ellipsis }); Text.fontWeight(FontWeight.Bold); Text.width(0); @@ -593,7 +593,7 @@ export class AtomicServiceNavigation extends ViewPU { this.observeComponentCreation2((elmtId, isInitialRender) => { Column.create(); Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); - Column.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_mask_thin'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); Column.width('100%'); Column.height('100%'); @@ -612,7 +612,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -632,10 +632,10 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.open_sidebar'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_headline7'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); - SymbolGlyph.fontColor([{ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); @@ -644,7 +644,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -674,7 +674,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.sideBarOptions?.sideBarIcon); - Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -707,7 +707,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -727,10 +727,10 @@ export class AtomicServiceNavigation extends ViewPU { Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); }, Button); this.observeComponentCreation2((elmtId, isInitialRender) => { - SymbolGlyph.create({ "id": -1, "type": 40000, params: ['sys.symbol.close_sidebar'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); SymbolGlyph.fontWeight(FontWeight.Normal); - SymbolGlyph.fontSize({ "id": -1, "type": 10002, params: ['sys.float.ohos_id_text_size_headline7'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); - SymbolGlyph.fontColor([{ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }]); + SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); + SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); }, SymbolGlyph); Button.pop(); }); @@ -739,7 +739,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -769,7 +769,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(2, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon); - Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -806,7 +806,7 @@ export class AtomicServiceNavigation extends ViewPU { top: 0, bottom: 0 }, - color: { "id": -1, "type": 10001, params: ['sys.color.comp_divider'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }, + color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, style: { right: BorderStyle.Solid } }); @@ -816,7 +816,7 @@ export class AtomicServiceNavigation extends ViewPU { Row.padding({ top: 56 }); Row.focusable(true); Row.defaultFocus(true); - Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_sub_background'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Row); this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -841,7 +841,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild({ type: ButtonType.Circle }); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.borderRadius(18); @@ -869,7 +869,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); - Image.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Image.width(36); Image.height(36); Image.borderRadius(18); @@ -898,7 +898,7 @@ export class AtomicServiceNavigation extends ViewPU { this.ifElseBranchUpdateFunction(0, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { Button.createWithChild(); - Button.backgroundColor({ "id": -1, "type": 10001, params: ['sys.color.ohos_id_color_button_normal'], "bundleName": "__harDefaultBundleName__", "moduleName": "__harDefaultModuleName__" }); + Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); Button.width(36); Button.height(36); Button.margin({ @@ -971,7 +971,7 @@ export class AtomicServiceNavigation extends ViewPU { Stack.width('100%'); Stack.height('100%'); Stack.background(this.gradientBackground === undefined ? undefined : { builder: () => { - this.BackgroundBuilder.call(this, makeBuilderParameterProxy("BackgroundBuilder", { primaryColor: () => this.gradientBackground.primaryColor, secondaryColor: () => this.gradientBackground.secondaryColor, backgroundTheme: () => this.gradientBackground.backgroundTheme, mixMode: () => this.gradientBackground.mixMode, alpha: () => this.gradientBackground.alpha })); + this.BackgroundBuilder.call(this, makeBuilderParameterProxy('BackgroundBuilder', { primaryColor: () => this.gradientBackground.primaryColor, secondaryColor: () => this.gradientBackground.secondaryColor, backgroundTheme: () => this.gradientBackground.backgroundTheme, mixMode: () => this.gradientBackground.mixMode, alpha: () => this.gradientBackground.alpha })); } }); Stack.onSizeChange((oldValue, newValue) => { this.navigationWidth = newValue.width; @@ -1015,7 +1015,7 @@ export class AtomicServiceNavigation extends ViewPU { Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); }, Stack); this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); + Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); Navigation.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); Navigation.title({ builder: () => { this.drawerTitleBuilder.call(this); @@ -1077,7 +1077,7 @@ export class AtomicServiceNavigation extends ViewPU { else { this.ifElseBranchUpdateFunction(1, () => { this.observeComponentCreation2((elmtId, isInitialRender) => { - Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); + Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); Navigation.title((this.titleOptions?.titleIcon || (this.titleOptions?.titleBarType && !this.title)) ? { builder: () => { this.titleBuilder.call(this); } } : this.title, this.getTitleOption()); @@ -1374,19 +1374,19 @@ class SideBarHelper { /** * 标题栏类型 */ -export var TitleBarType; +export let TitleBarType; (function (TitleBarType) { /** * 长图标类型标题栏 */ - TitleBarType[TitleBarType["SQUARED_ICON"] = 1] = "SQUARED_ICON"; + TitleBarType[TitleBarType['SQUARED_ICON'] = 1] = 'SQUARED_ICON'; /** * 圆形图标类型标题栏 */ - TitleBarType[TitleBarType["ROUND_ICON"] = 2] = "ROUND_ICON"; + TitleBarType[TitleBarType['ROUND_ICON'] = 2] = 'ROUND_ICON'; /** * 抽屉类型标题栏 */ - TitleBarType[TitleBarType["DRAWER"] = 3] = "DRAWER"; + TitleBarType[TitleBarType['DRAWER'] = 3] = 'DRAWER'; })(TitleBarType || (TitleBarType = {})); //# sourceMappingURL=MainPage.js.map \ No newline at end of file -- Gitee From 609d920651bf2461d1afb33399ab1bcb7ea51d61 Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Thu, 20 Feb 2025 10:53:18 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 43 +++++++++++-------- 1 file changed, 26 insertions(+), 17 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 583932e..2a368a4 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -14,12 +14,20 @@ */ let __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { let c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') r = Reflect.decorate(decorators, target, key, desc); - else for (let i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') { + r = Reflect.decorate(decorators, target, key, desc); + } else { + for (let i = decorators.length - 1; i >= 0; i--) { + if (d = decorators[i]) { + r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; + } + } + } return c > 3 && r && Object.defineProperty(target, key, r), r; }; if (!('finalizeConstruction' in ViewPU.prototype)) { - Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); + Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { + }); } const curves = requireNativeModule('ohos.curves'); const LengthMetrics = requireNapi('arkui.node').LengthMetrics; @@ -232,7 +240,7 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationBarVisibility = params.navigationBarVisibility; } } - updateStatelets(params) { + updateStateVars(params) { this.__title.reset(params.title); this.__titleOptions.reset(params.titleOptions); this.__gradientBackground.reset(params.gradientBackground); @@ -243,7 +251,7 @@ export class AtomicServiceNavigation extends ViewPU { this.__minContentWidth.reset(params.minContentWidth); this.__sideBarOptions.reset(params.sideBarOptions); } - purgeletiableDependenciesOnElmtId(rmElmtId) { + purgeVariableDependenciesOnElmtId(rmElmtId) { this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); this.__title.purgeDependencyOnElmtId(rmElmtId); this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); @@ -382,10 +390,9 @@ export class AtomicServiceNavigation extends ViewPU { Canvas.onReady(() => { if (gradientBackground.secondaryColor === undefined) { //单色渐变 - this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : - backGroundColor[gradientBackground.backgroundTheme - 1]); - } - else { + this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? + backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); + } else { if (gradientBackground.mixMode === MixMode.AVERAGE) { //双色渐变五五分 this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); @@ -474,11 +481,9 @@ export class AtomicServiceNavigation extends ViewPU { let newBreakPoint = ''; if (widthVp < BREAK_POINT_VP_SM) { newBreakPoint = BREAK_POINT_SM; - } - else if (widthVp < BREAK_POINT_VP_MD) { + } else if (widthVp < BREAK_POINT_VP_MD) { newBreakPoint = BREAK_POINT_MD; - } - else { + } else { newBreakPoint = BREAK_POINT_LG; } if (this.currentBreakPoint !== newBreakPoint) { @@ -1124,8 +1129,10 @@ export class AtomicServiceNavigation extends ViewPU { */ drawGradientCanvasHalf(context, primaryColor, secondaryColor) { let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; - let grad1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); - let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); + let grad1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, + height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); + let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, + this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); grad1.addColorStop(0, this.resourceColorToString(primaryColor)); grad1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); grad1.addColorStop(1, this.resourceColorToString(secondaryColor)); @@ -1158,7 +1165,8 @@ export class AtomicServiceNavigation extends ViewPU { grad2.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad2.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad2; - context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); + context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, + this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); @@ -1166,7 +1174,8 @@ export class AtomicServiceNavigation extends ViewPU { grad3.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad3.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad3; - context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT); + context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, + height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT); } /** * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角 -- Gitee From 4224b6ba71f751b0ff59d8aa2fbf26976e1539ab Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Thu, 20 Feb 2025 11:21:59 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 2a368a4..a537899 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -74,20 +74,20 @@ export let GradientAlpha; * 不透明度为0.2 * */ - GradientAlpha[GradientAlpha['OPACITY_20'] = 1] = 'OPACITY_20'; + GradientAlpha.OPACITY_20 = 1; /** * 不透明度为0.6 * */ - GradientAlpha[GradientAlpha['OPACITY_60'] = 2] = 'OPACITY_60'; + GradientAlpha.OPACITY_60 = 2; /** * 不透明度为0.8 */ - GradientAlpha[GradientAlpha['OPACITY_80'] = 3] = 'OPACITY_80'; + GradientAlpha.OPACITY_80 = 3; /** * 不透明度为1.0 */ - GradientAlpha[GradientAlpha['OPACITY_100'] = 4] = 'OPACITY_100'; + GradientAlpha.OPACITY_100 = 4; })(GradientAlpha || (GradientAlpha = {})); /** * 背景颜色融合方式 @@ -99,15 +99,15 @@ export let MixMode; /** * 两种颜色所占比例相同 */ - MixMode[MixMode['AVERAGE'] = 1] = 'AVERAGE'; + MixMode.AVERAGE = 1; /** * 一种颜色穿过另一种颜色 */ - MixMode[MixMode['CROSS'] = 2] = 'CROSS'; + MixMode.CROSS = 2; /** * 一种颜色渐渐转变为另一种颜色 */ - MixMode[MixMode['TOWARDS'] = 3] = 'TOWARDS'; + MixMode.TOWARDS = 3; })(MixMode || (MixMode = {})); /** * 背景底色 @@ -119,15 +119,15 @@ export let BackgroundTheme; /** * 黑色 */ - BackgroundTheme[BackgroundTheme['DARK'] = 1] = 'DARK'; + BackgroundTheme.DARK = 1; /** * 白色 */ - BackgroundTheme[BackgroundTheme['LIGHT'] = 2] = 'LIGHT'; + BackgroundTheme.LIGHT = 2; /** * 颜色值 #F1F3F5 */ - BackgroundTheme[BackgroundTheme['DEFAULT'] = 3] = 'DEFAULT'; + BackgroundTheme.DEFAULT = 3; })(BackgroundTheme || (BackgroundTheme = {})); export class AtomicServiceNavigation extends ViewPU { constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { @@ -1175,7 +1175,8 @@ export class AtomicServiceNavigation extends ViewPU { grad3.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad3; context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, - height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT); + height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, + height * COLOR_RATIO_FIFTY_PERCENT); } /** * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角 @@ -1388,14 +1389,14 @@ export let TitleBarType; /** * 长图标类型标题栏 */ - TitleBarType[TitleBarType['SQUARED_ICON'] = 1] = 'SQUARED_ICON'; + TitleBarType.SQUARED_ICON = 1; /** * 圆形图标类型标题栏 */ - TitleBarType[TitleBarType['ROUND_ICON'] = 2] = 'ROUND_ICON'; + TitleBarType.ROUND_ICON = 2; /** * 抽屉类型标题栏 */ - TitleBarType[TitleBarType['DRAWER'] = 3] = 'DRAWER'; + TitleBarType.DRAWER = 3; })(TitleBarType || (TitleBarType = {})); //# sourceMappingURL=MainPage.js.map \ No newline at end of file -- Gitee From 1d9fa9fdfb50884e1056d4876c91b96527209c82 Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Thu, 20 Feb 2025 14:41:08 +0800 Subject: [PATCH 7/7] =?UTF-8?q?=E5=85=83=E6=9C=8D=E5=8A=A1Navigation?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=96=B0=E5=A2=9E=E5=AE=BD=E5=B1=8F=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 49 +++++++++++-------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index a537899..a3e73c5 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -12,19 +12,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -let __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { - let c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; - if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function') { - r = Reflect.decorate(decorators, target, key, desc); - } else { - for (let i = decorators.length - 1; i >= 0; i--) { - if (d = decorators[i]) { - r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; - } - } - } - return c > 3 && r && Object.defineProperty(target, key, r), r; -}; if (!('finalizeConstruction' in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { }); @@ -975,9 +962,18 @@ export class AtomicServiceNavigation extends ViewPU { Stack.create(); Stack.width('100%'); Stack.height('100%'); - Stack.background(this.gradientBackground === undefined ? undefined : { builder: () => { - this.BackgroundBuilder.call(this, makeBuilderParameterProxy('BackgroundBuilder', { primaryColor: () => this.gradientBackground.primaryColor, secondaryColor: () => this.gradientBackground.secondaryColor, backgroundTheme: () => this.gradientBackground.backgroundTheme, mixMode: () => this.gradientBackground.mixMode, alpha: () => this.gradientBackground.alpha })); - } }); + Stack.background(this.gradientBackground === undefined ? undefined : { + builder: () => { + this.BackgroundBuilder.call(this, + makeBuilderParameterProxy('BackgroundBuilder', { + primaryColor: () => this.gradientBackground.primaryColor, + secondaryColor: () => this.gradientBackground.secondaryColor, + backgroundTheme: () => this.gradientBackground.backgroundTheme, + mixMode: () => this.gradientBackground.mixMode, + alpha: () => this.gradientBackground.alpha + }) + ); + }}); Stack.onSizeChange((oldValue, newValue) => { this.navigationWidth = newValue.width; this.navigationHeight = newValue.height; @@ -1160,16 +1156,19 @@ export class AtomicServiceNavigation extends ViewPU { context.fillRect(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, height); let y1 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : 0; - let grad2 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); + let grad2 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, + height * COLOR_RATIO_FIFTY_PERCENT); grad2.addColorStop(0, this.resourceColorToString(secondaryColor)); grad2.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad2.addColorStop(1, this.resourceColorToString(primaryColor)); context.fillStyle = grad2; context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, - this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); + this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, + height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; - let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); + let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, + this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); grad3.addColorStop(0, this.resourceColorToString(secondaryColor)); grad3.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); grad3.addColorStop(1, this.resourceColorToString(primaryColor)); @@ -1243,7 +1242,8 @@ export class AtomicServiceNavigation extends ViewPU { catch (error) { let code = error.code; let message = error.message; - hilog.error(0x0000, 'AtomicServiceNavigation', `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); + hilog.error(0x0000, 'AtomicServiceNavigation', + `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); } return ''; } @@ -1399,4 +1399,11 @@ export let TitleBarType; */ TitleBarType.DRAWER = 3; })(TitleBarType || (TitleBarType = {})); -//# sourceMappingURL=MainPage.js.map \ No newline at end of file +//# sourceMappingURL=AtomicServiceNavigation.js.map +export default { + AtomicServiceNavigation, + MixMode, + GradientAlpha, + BackgroundTheme, + TitleBarType +}; \ No newline at end of file -- Gitee