From c7b0d84b7e7c31739450886794bd1c9600e480a7 Mon Sep 17 00:00:00 2001 From: Knight4Lancelot <320062713@qq.com> Date: Thu, 13 Feb 2025 15:53:16 +0800 Subject: [PATCH] =?UTF-8?q?AtomicServiceNavigation=E6=8F=90=E4=BE=9B?= =?UTF-8?q?=E6=96=B0=E7=9A=84=E5=AD=97=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Knight4Lancelot --- .../interfaces/atomicservicenavigation.js | 162 +++++++++++------- .../source/atomicservicenavigation.ets | 25 +++ 2 files changed, 124 insertions(+), 63 deletions(-) diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 8d98ae4..085bae2 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -16,65 +16,75 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } +const display = requireNativeModule('ohos.dsiplay'); export class AtomicServiceNavigation extends ViewPU { - constructor(w, x, y, z = -1, a1 = undefined, b1) { - super(w, y, z, b1); - if (typeof a1 === "function") { - this.paramsGenerator_ = a1; + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { + super(parent, __localStorage, elmtId, extraInfo); + if (typeof paramsLambda === "function") { + this.paramsGenerator_ = paramsLambda; } this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, "navPathStack"); this.navigationContent = undefined; - this.__title = new SynchedPropertyObjectOneWayPU(x.title, this, "title"); - this.__titleOptions = new SynchedPropertyObjectOneWayPU(x.titleOptions, this, "titleOptions"); - this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(x.hideTitleBar, this, "hideTitleBar"); - this.__navBarWidth = new SynchedPropertyObjectOneWayPU(x.navBarWidth, this, "navBarWidth"); - this.__mode = new SynchedPropertySimpleOneWayPU(x.mode, this, "mode"); + this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, "title"); + this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, "titleOptions"); + 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(x.navBarWidthRange, this, "navBarWidthRange"); - this.__minContentWidth = new SynchedPropertyObjectOneWayPU(x.minContentWidth, this, "minContentWidth"); + this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, "navBarWidthRange"); + this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, "minContentWidth"); + this.insertComps = undefined; this.stateChangeCallback = undefined; this.modeChangeCallback = undefined; - this.setInitiallyProvidedValue(x); + this.__isShow = new ObservedPropertySimplePU(false, this, "isShow"); + this.setInitiallyProvidedValue(params); this.finalizeConstruction(); } - setInitiallyProvidedValue(v) { - if (v.navPathStack !== undefined) { - this.navPathStack = v.navPathStack; + setInitiallyProvidedValue(params) { + if (params.navPathStack !== undefined) { + this.navPathStack = params.navPathStack; } - if (v.navigationContent !== undefined) { - this.navigationContent = v.navigationContent; + if (params.navigationContent !== undefined) { + this.navigationContent = params.navigationContent; } - if (v.titleOptions === undefined) { + if (params.titleOptions === undefined) { this.__titleOptions.set({ isBlurEnabled: true }); } - if (v.navDestinationBuilder !== undefined) { - this.navDestinationBuilder = v.navDestinationBuilder; + if (params.navDestinationBuilder !== undefined) { + this.navDestinationBuilder = params.navDestinationBuilder; } - if (v.stateChangeCallback !== undefined) { - this.stateChangeCallback = v.stateChangeCallback; + if (params.insertComps !== undefined) { + this.insertComps = params.insertComps; } - if (v.modeChangeCallback !== undefined) { - this.modeChangeCallback = v.modeChangeCallback; + if (params.stateChangeCallback !== undefined) { + this.stateChangeCallback = params.stateChangeCallback; + } + if (params.modeChangeCallback !== undefined) { + this.modeChangeCallback = params.modeChangeCallback; + } + if (params.isShow !== undefined) { + this.isShow = params.isShow; } } - updateStateVars(u) { - this.__title.reset(u.title); - this.__titleOptions.reset(u.titleOptions); - this.__hideTitleBar.reset(u.hideTitleBar); - this.__navBarWidth.reset(u.navBarWidth); - this.__mode.reset(u.mode); - this.__navBarWidthRange.reset(u.navBarWidthRange); - this.__minContentWidth.reset(u.minContentWidth); - } - purgeVariableDependenciesOnElmtId(t) { - this.__navPathStack.purgeDependencyOnElmtId(t); - this.__title.purgeDependencyOnElmtId(t); - this.__titleOptions.purgeDependencyOnElmtId(t); - this.__hideTitleBar.purgeDependencyOnElmtId(t); - this.__navBarWidth.purgeDependencyOnElmtId(t); - this.__mode.purgeDependencyOnElmtId(t); - this.__navBarWidthRange.purgeDependencyOnElmtId(t); - this.__minContentWidth.purgeDependencyOnElmtId(t); + updateStateVars(params) { + this.__title.reset(params.title); + this.__titleOptions.reset(params.titleOptions); + this.__hideTitleBar.reset(params.hideTitleBar); + this.__navBarWidth.reset(params.navBarWidth); + this.__mode.reset(params.mode); + this.__navBarWidthRange.reset(params.navBarWidthRange); + this.__minContentWidth.reset(params.minContentWidth); + } + purgeVariableDependenciesOnElmtId(rmElmtId) { + this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); + this.__title.purgeDependencyOnElmtId(rmElmtId); + this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); + this.__hideTitleBar.purgeDependencyOnElmtId(rmElmtId); + this.__navBarWidth.purgeDependencyOnElmtId(rmElmtId); + this.__mode.purgeDependencyOnElmtId(rmElmtId); + this.__navBarWidthRange.purgeDependencyOnElmtId(rmElmtId); + this.__minContentWidth.purgeDependencyOnElmtId(rmElmtId); + this.__isShow.purgeDependencyOnElmtId(rmElmtId); } aboutToBeDeleted() { this.__navPathStack.aboutToBeDeleted(); @@ -85,67 +95,93 @@ export class AtomicServiceNavigation extends ViewPU { this.__mode.aboutToBeDeleted(); this.__navBarWidthRange.aboutToBeDeleted(); this.__minContentWidth.aboutToBeDeleted(); + this.__isShow.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } get navPathStack() { return this.__navPathStack.get(); } - set navPathStack(s) { - this.__navPathStack.set(s); + set navPathStack(newValue) { + this.__navPathStack.set(newValue); } get title() { return this.__title.get(); } - set title(r) { - this.__title.set(r); + set title(newValue) { + this.__title.set(newValue); } get titleOptions() { return this.__titleOptions.get(); } - set titleOptions(q) { - this.__titleOptions.set(q); + set titleOptions(newValue) { + this.__titleOptions.set(newValue); } get hideTitleBar() { return this.__hideTitleBar.get(); } - set hideTitleBar(p) { - this.__hideTitleBar.set(p); + set hideTitleBar(newValue) { + this.__hideTitleBar.set(newValue); } get navBarWidth() { return this.__navBarWidth.get(); } - set navBarWidth(o) { - this.__navBarWidth.set(o); + set navBarWidth(newValue) { + this.__navBarWidth.set(newValue); } get mode() { return this.__mode.get(); } - set mode(n) { - this.__mode.set(n); + set mode(newValue) { + this.__mode.set(newValue); } get navBarWidthRange() { return this.__navBarWidthRange.get(); } - set navBarWidthRange(m) { - this.__navBarWidthRange.set(m); + set navBarWidthRange(newValue) { + this.__navBarWidthRange.set(newValue); } get minContentWidth() { return this.__minContentWidth.get(); } - set minContentWidth(l) { - this.__minContentWidth.set(l); + set minContentWidth(newValue) { + this.__minContentWidth.set(newValue); + } + get isShow() { + return this.__isShow.get(); + } + set isShow(newValue) { + this.__isShow.set(newValue); + } + getCurrentWidth() { + let displayClass = display.getDefaultDisplaySync(); + return displayClass.width / displayClass.densityPixels; + } + aboutToAppear() { + this.isShow = this.getCurrentWidth() > 600; + display.on('change', () => { + this.isShow = this.getCurrentWidth() > 600; + }); + } + aboutToDisappear() { + display.off('change'); + } + defaultNavDestinationBuilder(name, param, parent = null) { } - defaultNavDestinationBuilder(i, j, k = null) { + MenuItemArray() { + return this.isShow && this.insertComps instanceof Array ? this.insertComps : undefined; } initialRender() { - this.observeComponentCreation2((g, h) => { - Navigation.create(this.navPathStack); + this.observeComponentCreation2((elmtId, isInitialRender) => { + Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); Navigation.title(ObservedObject.GetRawObject(this.title), { backgroundColor: this.titleOptions?.backgroundColor, backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }); + Navigation.menus(this.isShow && this.insertComps instanceof Function ? { builder: () => { + this.insertComps.call(this); + } } : this.MenuItemArray()); Navigation.titleMode(NavigationTitleMode.Mini); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); @@ -158,11 +194,11 @@ export class AtomicServiceNavigation extends ViewPU { Navigation.onNavBarStateChange(this.stateChangeCallback); Navigation.onNavigationModeChange(this.modeChangeCallback); }, Navigation); - this.observeComponentCreation2((c, d) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (this.navigationContent) { this.ifElseBranchUpdateFunction(0, () => { - this.navigationContent.bind(this)(this); + this.navigationContent.bind(this)(); }); } else { diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index 13596b8..c512850 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -14,6 +14,7 @@ */ import { Callback } from '@ohos.base'; +import { display } from '@kit.ArkUI'; @Component export struct AtomicServiceNavigation { @@ -27,13 +28,36 @@ export struct AtomicServiceNavigation { @BuilderParam navDestinationBuilder?: NavDestinationBuilder = this.defaultNavDestinationBuilder; @Prop navBarWidthRange?: [Dimension, Dimension]; @Prop minContentWidth?: Dimension; + @BuilderParam insertComps?: CustomBuilder | Array; stateChangeCallback?: Callback; modeChangeCallback?: Callback; + @State isShow: boolean = false; + + private getCurrentWidth(): number { + let displayClass = display.getDefaultDisplaySync(); + return displayClass.width / displayClass.densityPixels; + } + + aboutToAppear(): void { + this.isShow = this.getCurrentWidth() > 600; + + display.on('change', () => { + this.isShow = this.getCurrentWidth() > 600; + }) + } + + aboutToDisappear(): void { + display.off('change'); + } @Builder defaultNavDestinationBuilder(name: string, param?: Object) { } + private MenuItemArray(): undefined | Array { + return this.isShow && this.insertComps instanceof Array ? this.insertComps : undefined; + } + build() { Navigation(this.navPathStack) { if (this.navigationContent) { @@ -45,6 +69,7 @@ export struct AtomicServiceNavigation { backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }) + .menus(this.isShow && this.insertComps instanceof Function ? this.insertComps() : this.MenuItemArray()) .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) .hideTitleBar(this.hideTitleBar) -- Gitee