1/* 2 * Copyright (c) 2024 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15if (!('finalizeConstruction' in ViewPU.prototype)) { 16 Reflect.set(ViewPU.prototype, 'finalizeConstruction', () => { 17 }); 18} 19const curves = requireNativeModule('ohos.curves'); 20const LengthMetrics = requireNapi('arkui.node').LengthMetrics; 21const SymbolGlyphModifier = requireNapi('arkui.modifier').SymbolGlyphModifier; 22const bundleManager = requireNapi('bundle.bundleManager'); 23const hilog = requireNapi('hilog'); 24const i18n = requireNapi('i18n'); 25/** 26 * 背景渐变色相关数据 27 */ 28const backGroundColor = ['rgb(0,0,0)', 'rgb(255,255,255)', 'rgb(241,243,245)']; 29const backGroundTransparentGradientColor = [['rgba(0,0,0,0)', 'rgba(0,0,0,1)'], 30 ['rgba(255,255,255,0)', 'rgba(255,255,255,1)'], ['rgba(241,243,245,0)', 'rgba(241,243,245,1)']]; 31const transparencyMapArray = [0.15, 0.15, 0.4, 0.6, 0.8]; 32const RECTANGLE_OUTSIDE_OFFSET_ONE = 1; 33const COLOR_RATIO_THIRTY_PERCENT = 0.3; 34const COLOR_RATIO_FIFTY_PERCENT = 0.5; 35const COLOR_RATIO_SEVENTY_PERCENT = 0.7; 36const COLOR_RATIO_FORTY_PERCENT = 0.4; 37const COLOR_RATIO_SIXTY_PERCENT = 0.6; 38const COLOR_RATIO_ONE_FIFTY_PERCENT = 1.5; 39const COORDINATE_NEGATIVE_ONE = -1; 40const BLUR_CONSTANT = 500; 41/** 42 * 三种标题栏相关数据 43 */ 44const BREAK_POINT_VP_SM = 600; 45const BREAK_POINT_VP_MD = 840; 46const BREAK_POINT_SM = 'sm'; 47const BREAK_POINT_MD = 'md'; 48const BREAK_POINT_LG = 'lg'; 49const SIDE_BAR_EMBED_MIN_WIDTH = 240; 50const SIDE_BAR_OVERLAY_WIDTH = 304; 51const SIDE_BAR_COMMON_WIDTH = 360; 52const CONTENT_MIN_WIDTH = 600; 53/** 54 * menubar避让区域宽度计算修正时用到的数据 55 */ 56const MENUBAR_X_FIRST_THRESHOLD = 200; 57const MENUBAR_X_SECOND_THRESHOLD = 40; 58const MENUBAR_CORRECTION_OFFSET_VALUE = 92; 59/** 60 * 背景颜色的不透明度的枚举类型 61 * 62 * @enum { number }. 63 */ 64export let GradientAlpha; 65(function (GradientAlpha) { 66 /** 67 * 不透明度为0.2 68 * 69 */ 70 GradientAlpha.OPACITY_20 = 1; 71 /** 72 * 不透明度为0.6 73 * 74 */ 75 GradientAlpha.OPACITY_60 = 2; 76 /** 77 * 不透明度为0.8 78 */ 79 GradientAlpha.OPACITY_80 = 3; 80 /** 81 * 不透明度为1.0 82 */ 83 GradientAlpha.OPACITY_100 = 4; 84})(GradientAlpha || (GradientAlpha = {})); 85/** 86 * 背景颜色融合方式 87 * 88 * @enum { number }. 89 */ 90export let MixMode; 91(function (MixMode) { 92 /** 93 * 两种颜色所占比例相同 94 */ 95 MixMode.AVERAGE = 1; 96 /** 97 * 一种颜色穿过另一种颜色 98 */ 99 MixMode.CROSS = 2; 100 /** 101 * 一种颜色渐渐转变为另一种颜色 102 */ 103 MixMode.TOWARDS = 3; 104})(MixMode || (MixMode = {})); 105/** 106 * 背景底色 107 * 108 * @enum { number }. 109 */ 110export let BackgroundTheme; 111(function (BackgroundTheme) { 112 /** 113 * 黑色 114 */ 115 BackgroundTheme.DARK = 1; 116 /** 117 * 白色 118 */ 119 BackgroundTheme.LIGHT = 2; 120 /** 121 * 颜色值 #F1F3F5 122 */ 123 BackgroundTheme.DEFAULT = 3; 124})(BackgroundTheme || (BackgroundTheme = {})); 125export class AtomicServiceNavigation extends ViewPU { 126 constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { 127 super(parent, __localStorage, elmtId, extraInfo); 128 if (typeof paramsLambda === 'function') { 129 this.paramsGenerator_ = paramsLambda; 130 } 131 this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, 'navPathStack'); 132 this.navigationContent = undefined; 133 this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, 'title'); 134 this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, 'titleOptions'); 135 this.__gradientBackground = new SynchedPropertyObjectOneWayPU(params.gradientBackground, this, 'gradientBackground'); 136 this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, 'hideTitleBar'); 137 this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, 'navBarWidth'); 138 this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, 'mode'); 139 this.navDestinationBuilder = this.defaultNavDestinationBuilder; 140 this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, 'navBarWidthRange'); 141 this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, 'minContentWidth'); 142 this.__sideBarOptions = new SynchedPropertyObjectOneWayPU(params.sideBarOptions, this, 'sideBarOptions'); 143 this.sideBarContent = undefined; 144 this.__showMaskLayer = new ObservedPropertySimplePU(false, this, 'showMaskLayer'); 145 this.__marginWindowLeft = new ObservedPropertySimplePU(16, this, 'marginWindowLeft'); 146 this.__currentBreakPoint = new ObservedPropertySimplePU(BREAK_POINT_SM, this, 'currentBreakPoint'); 147 this.__sideBarAttribute = new ObservedPropertyObjectPU(new sideBarAttributeSet(), this, 'sideBarAttribute'); 148 this.__controlButtonVisible = new ObservedPropertySimplePU(true, this, 'controlButtonVisible'); 149 this.__titleBuilderPaddingEndWidth = new ObservedPropertySimplePU(0, this, 'titleBuilderPaddingEndWidth'); 150 this.menus = undefined; 151 this.stateChangeCallback = undefined; 152 this.modeChangeCallback = undefined; 153 this.settings = new RenderingContextSettings(true); 154 this.context = new CanvasRenderingContext2D(this.settings); 155 this.__navigationWidth = new ObservedPropertySimplePU(0, this, 'navigationWidth'); 156 this.__navigationHeight = new ObservedPropertySimplePU(0, this, 'navigationHeight'); 157 this.mainWindow = undefined; 158 this.onWindowSizeChangeCallback = undefined; 159 this.onAvoidSafeAreaChangeCallback = undefined; 160 this.sideBarHelper = undefined; 161 this.atomicServiceIcon = undefined; 162 this.navigationBarVisibility = true; 163 this.setInitiallyProvidedValue(params); 164 this.finalizeConstruction(); 165 } 166 setInitiallyProvidedValue(params) { 167 if (params.navPathStack !== undefined) { 168 this.navPathStack = params.navPathStack; 169 } 170 if (params.navigationContent !== undefined) { 171 this.navigationContent = params.navigationContent; 172 } 173 if (params.titleOptions === undefined) { 174 this.__titleOptions.set({ isBlurEnabled: true }); 175 } 176 if (params.navDestinationBuilder !== undefined) { 177 this.navDestinationBuilder = params.navDestinationBuilder; 178 } 179 if (params.sideBarContent !== undefined) { 180 this.sideBarContent = params.sideBarContent; 181 } 182 if (params.showMaskLayer !== undefined) { 183 this.showMaskLayer = params.showMaskLayer; 184 } 185 if (params.marginWindowLeft !== undefined) { 186 this.marginWindowLeft = params.marginWindowLeft; 187 } 188 if (params.currentBreakPoint !== undefined) { 189 this.currentBreakPoint = params.currentBreakPoint; 190 } 191 if (params.sideBarAttribute !== undefined) { 192 this.sideBarAttribute = params.sideBarAttribute; 193 } 194 if (params.controlButtonVisible !== undefined) { 195 this.controlButtonVisible = params.controlButtonVisible; 196 } 197 if (params.titleBuilderPaddingEndWidth !== undefined) { 198 this.titleBuilderPaddingEndWidth = params.titleBuilderPaddingEndWidth; 199 } 200 if (params.menus !== undefined) { 201 this.menus = params.menus; 202 } 203 if (params.stateChangeCallback !== undefined) { 204 this.stateChangeCallback = params.stateChangeCallback; 205 } 206 if (params.modeChangeCallback !== undefined) { 207 this.modeChangeCallback = params.modeChangeCallback; 208 } 209 if (params.settings !== undefined) { 210 this.settings = params.settings; 211 } 212 if (params.context !== undefined) { 213 this.context = params.context; 214 } 215 if (params.navigationWidth !== undefined) { 216 this.navigationWidth = params.navigationWidth; 217 } 218 if (params.navigationHeight !== undefined) { 219 this.navigationHeight = params.navigationHeight; 220 } 221 if (params.mainWindow !== undefined) { 222 this.mainWindow = params.mainWindow; 223 } 224 if (params.onWindowSizeChangeCallback !== undefined) { 225 this.onWindowSizeChangeCallback = params.onWindowSizeChangeCallback; 226 } 227 if (params.onAvoidSafeAreaChangeCallback !== undefined) { 228 this.onAvoidSafeAreaChangeCallback = params.onAvoidSafeAreaChangeCallback; 229 } 230 if (params.sideBarHelper !== undefined) { 231 this.sideBarHelper = params.sideBarHelper; 232 } 233 if (params.atomicServiceIcon !== undefined) { 234 this.atomicServiceIcon = params.atomicServiceIcon; 235 } 236 if (params.navigationBarVisibility !== undefined) { 237 this.navigationBarVisibility = params.navigationBarVisibility; 238 } 239 } 240 updateStateVars(params) { 241 this.__title.reset(params.title); 242 this.__titleOptions.reset(params.titleOptions); 243 this.__gradientBackground.reset(params.gradientBackground); 244 this.__hideTitleBar.reset(params.hideTitleBar); 245 this.__navBarWidth.reset(params.navBarWidth); 246 this.__mode.reset(params.mode); 247 this.__navBarWidthRange.reset(params.navBarWidthRange); 248 this.__minContentWidth.reset(params.minContentWidth); 249 this.__sideBarOptions.reset(params.sideBarOptions); 250 } 251 purgeVariableDependenciesOnElmtId(rmElmtId) { 252 this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); 253 this.__title.purgeDependencyOnElmtId(rmElmtId); 254 this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); 255 this.__gradientBackground.purgeDependencyOnElmtId(rmElmtId); 256 this.__hideTitleBar.purgeDependencyOnElmtId(rmElmtId); 257 this.__navBarWidth.purgeDependencyOnElmtId(rmElmtId); 258 this.__mode.purgeDependencyOnElmtId(rmElmtId); 259 this.__navBarWidthRange.purgeDependencyOnElmtId(rmElmtId); 260 this.__minContentWidth.purgeDependencyOnElmtId(rmElmtId); 261 this.__sideBarOptions.purgeDependencyOnElmtId(rmElmtId); 262 this.__showMaskLayer.purgeDependencyOnElmtId(rmElmtId); 263 this.__marginWindowLeft.purgeDependencyOnElmtId(rmElmtId); 264 this.__currentBreakPoint.purgeDependencyOnElmtId(rmElmtId); 265 this.__sideBarAttribute.purgeDependencyOnElmtId(rmElmtId); 266 this.__controlButtonVisible.purgeDependencyOnElmtId(rmElmtId); 267 this.__titleBuilderPaddingEndWidth.purgeDependencyOnElmtId(rmElmtId); 268 this.__navigationWidth.purgeDependencyOnElmtId(rmElmtId); 269 this.__navigationHeight.purgeDependencyOnElmtId(rmElmtId); 270 } 271 aboutToBeDeleted() { 272 this.__navPathStack.aboutToBeDeleted(); 273 this.__title.aboutToBeDeleted(); 274 this.__titleOptions.aboutToBeDeleted(); 275 this.__gradientBackground.aboutToBeDeleted(); 276 this.__hideTitleBar.aboutToBeDeleted(); 277 this.__navBarWidth.aboutToBeDeleted(); 278 this.__mode.aboutToBeDeleted(); 279 this.__navBarWidthRange.aboutToBeDeleted(); 280 this.__minContentWidth.aboutToBeDeleted(); 281 this.__sideBarOptions.aboutToBeDeleted(); 282 this.__showMaskLayer.aboutToBeDeleted(); 283 this.__marginWindowLeft.aboutToBeDeleted(); 284 this.__currentBreakPoint.aboutToBeDeleted(); 285 this.__sideBarAttribute.aboutToBeDeleted(); 286 this.__controlButtonVisible.aboutToBeDeleted(); 287 this.__titleBuilderPaddingEndWidth.aboutToBeDeleted(); 288 this.__navigationWidth.aboutToBeDeleted(); 289 this.__navigationHeight.aboutToBeDeleted(); 290 SubscriberManager.Get().delete(this.id__()); 291 this.aboutToBeDeletedInternal(); 292 } 293 get navPathStack() { 294 return this.__navPathStack.get(); 295 } 296 set navPathStack(newValue) { 297 this.__navPathStack.set(newValue); 298 } 299 get title() { 300 return this.__title.get(); 301 } 302 set title(newValue) { 303 this.__title.set(newValue); 304 } 305 get titleOptions() { 306 return this.__titleOptions.get(); 307 } 308 set titleOptions(newValue) { 309 this.__titleOptions.set(newValue); 310 } 311 get gradientBackground() { 312 return this.__gradientBackground.get(); 313 } 314 set gradientBackground(newValue) { 315 this.__gradientBackground.set(newValue); 316 } 317 get hideTitleBar() { 318 return this.__hideTitleBar.get(); 319 } 320 set hideTitleBar(newValue) { 321 this.__hideTitleBar.set(newValue); 322 } 323 get navBarWidth() { 324 return this.__navBarWidth.get(); 325 } 326 set navBarWidth(newValue) { 327 this.__navBarWidth.set(newValue); 328 } 329 get mode() { 330 return this.__mode.get(); 331 } 332 set mode(newValue) { 333 this.__mode.set(newValue); 334 } 335 get navBarWidthRange() { 336 return this.__navBarWidthRange.get(); 337 } 338 set navBarWidthRange(newValue) { 339 this.__navBarWidthRange.set(newValue); 340 } 341 get minContentWidth() { 342 return this.__minContentWidth.get(); 343 } 344 set minContentWidth(newValue) { 345 this.__minContentWidth.set(newValue); 346 } 347 get sideBarOptions() { 348 return this.__sideBarOptions.get(); 349 } 350 set sideBarOptions(newValue) { 351 this.__sideBarOptions.set(newValue); 352 } 353 get showMaskLayer() { 354 return this.__showMaskLayer.get(); 355 } 356 set showMaskLayer(newValue) { 357 this.__showMaskLayer.set(newValue); 358 } 359 get marginWindowLeft() { 360 return this.__marginWindowLeft.get(); 361 } 362 set marginWindowLeft(newValue) { 363 this.__marginWindowLeft.set(newValue); 364 } 365 get currentBreakPoint() { 366 return this.__currentBreakPoint.get(); 367 } 368 set currentBreakPoint(newValue) { 369 this.__currentBreakPoint.set(newValue); 370 } 371 get sideBarAttribute() { 372 return this.__sideBarAttribute.get(); 373 } 374 set sideBarAttribute(newValue) { 375 this.__sideBarAttribute.set(newValue); 376 } 377 get controlButtonVisible() { 378 return this.__controlButtonVisible.get(); 379 } 380 set controlButtonVisible(newValue) { 381 this.__controlButtonVisible.set(newValue); 382 } 383 get titleBuilderPaddingEndWidth() { 384 return this.__titleBuilderPaddingEndWidth.get(); 385 } 386 set titleBuilderPaddingEndWidth(newValue) { 387 this.__titleBuilderPaddingEndWidth.set(newValue); 388 } 389 get navigationWidth() { 390 return this.__navigationWidth.get(); 391 } 392 set navigationWidth(newValue) { 393 this.__navigationWidth.set(newValue); 394 } 395 get navigationHeight() { 396 return this.__navigationHeight.get(); 397 } 398 set navigationHeight(newValue) { 399 this.__navigationHeight.set(newValue); 400 } 401 defaultNavDestinationBuilder(name, param, parent = null) { 402 } 403 BackgroundBuilder(gradientBackground, parent = null) { 404 this.observeComponentCreation2((elmtId, isInitialRender) => { 405 Canvas.create(this.context); 406 Canvas.opacity(transparencyMapArray[(gradientBackground.alpha === undefined) ? GradientAlpha.OPACITY_20 : 407 gradientBackground.alpha]); 408 Canvas.backdropBlur(BLUR_CONSTANT); 409 Canvas.height(this.navigationHeight); 410 Canvas.backgroundColor(gradientBackground.backgroundTheme === undefined ? backGroundColor[2] : 411 backGroundColor[gradientBackground.backgroundTheme - 1]); 412 Canvas.onReady(() => { 413 if (gradientBackground.secondaryColor === undefined) { 414 //单色渐变 415 this.drawSingleGradient(this.context, gradientBackground.primaryColor, gradientBackground.backgroundTheme === undefined ? 416 backGroundColor[2] : backGroundColor[gradientBackground.backgroundTheme - 1]); 417 } else { 418 if (gradientBackground.mixMode === MixMode.AVERAGE) { 419 //双色渐变五五分 420 this.drawGradientCanvasHalf(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 421 } 422 else if (gradientBackground.mixMode === MixMode.CROSS) { 423 //第一种双色渐变三七分 424 this.drawGradientCanvasCross(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 425 } 426 else { 427 //第二种双色渐变三七分 428 this.drawGradientCanvasTowards(this.context, gradientBackground.primaryColor, gradientBackground.secondaryColor); 429 } 430 this.drawTransparentGradient(this.context, gradientBackground.backgroundTheme === undefined ? BackgroundTheme.DEFAULT : 431 gradientBackground.backgroundTheme); 432 } 433 }); 434 Canvas.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 435 }, Canvas); 436 Canvas.pop(); 437 } 438 aboutToAppear() { 439 this.initWindow(); 440 this.initIcon(); 441 this.initSideBarAttr(); 442 } 443 /** 444 * 初始化侧边栏相关信息 445 */ 446 initSideBarAttr() { 447 if (this.titleOptions?.titleBarType !== TitleBarType.DRAWER) { 448 return; 449 } 450 this.sideBarAttribute = new sideBarAttributeSet(); 451 this.sideBarHelper = new SideBarHelper(); 452 let sideBarStatusListener = (show) => { 453 this.sideBarAttribute.showSideBar = show; 454 this.updateControlButtonVisibility(); 455 if (this.sideBarOptions?.onChange) { 456 this.sideBarOptions.onChange(show); 457 } 458 }; 459 this.sideBarHelper.registerListener(sideBarStatusListener); 460 } 461 /** 462 * 窗口初始化或者尺寸发生变化时，让menubar避让宽度更新 463 */ 464 freshMenubarAvoidAreaWidth(mainWindow) { 465 setTimeout(() => { 466 const atomicServiceBar = this.getUIContext().getAtomicServiceBar(); 467 if (!atomicServiceBar) { 468 this.titleBuilderPaddingEndWidth = 0; 469 return; 470 } 471 let menubarX = atomicServiceBar.getBarRect().x; 472 let corretionWidth = 0; 473 if (menubarX > MENUBAR_X_FIRST_THRESHOLD) { 474 const mainWindowWidth = px2vp(mainWindow.getWindowProperties()?.windowRect?.width) - menubarX; 475 corretionWidth = mainWindowWidth > MENUBAR_X_FIRST_THRESHOLD ? 0 : mainWindowWidth; 476 } 477 else if (menubarX < MENUBAR_X_SECOND_THRESHOLD) { 478 corretionWidth = menubarX + MENUBAR_CORRECTION_OFFSET_VALUE; 479 } 480 let currentWidth = atomicServiceBar.getBarRect().width; 481 this.titleBuilderPaddingEndWidth = corretionWidth > currentWidth ? corretionWidth : currentWidth; 482 }, 100); 483 } 484 /** 485 * 初始化window，并设置windowSizeChange监听，更新断点信息 486 */ 487 initWindow() { 488 let context = getContext(this); 489 context?.windowStage?.getMainWindow().then(mainWindow => { 490 if (!mainWindow) { 491 return; 492 } 493 this.mainWindow = mainWindow; 494 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 495 this.sideBarHelper?.updateLayout(this.currentBreakPoint, this.sideBarAttribute); 496 } 497 this.updateBreakPoint(mainWindow.getWindowProperties()?.windowRect?.width); 498 this.freshMenubarAvoidAreaWidth(mainWindow); 499 this.onWindowSizeChangeCallback = ((windowSize) => { 500 this.updateBreakPoint(windowSize?.width); 501 this.freshMenubarAvoidAreaWidth(mainWindow); 502 }); 503 mainWindow.on('windowSizeChange', this.onWindowSizeChangeCallback); 504 }).catch((err) => { 505 console.error(`AtomicServiceNavigation get main window failed, message is ${err?.message}`); 506 }); 507 } 508 /** 509 * 初始化icon，用户如果设置了则用自定义的icon，没有设置则用元服务图标 510 */ 511 initIcon() { 512 if ((this.titleOptions?.titleBarType !== TitleBarType.ROUND_ICON && 513 this.titleOptions?.titleBarType !== TitleBarType.SQUARED_ICON) || this.titleOptions?.titleIcon) { 514 return; 515 } 516 let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION; 517 let bundleInfo = bundleManager.getBundleInfoForSelfSync(bundleFlags); 518 let iconRes = bundleInfo?.appInfo?.iconResource; 519 this.atomicServiceIcon = getContext(this)?.resourceManager?.getDrawableDescriptor(iconRes)?.getPixelMap(); 520 } 521 /** 522 * 更新断点信息 523 */ 524 updateBreakPoint(windowWidth) { 525 if (!windowWidth || windowWidth <= 0) { 526 return; 527 } 528 let widthVp = px2vp(windowWidth); 529 let newBreakPoint = ''; 530 if (widthVp < BREAK_POINT_VP_SM) { 531 newBreakPoint = BREAK_POINT_SM; 532 } else if (widthVp < BREAK_POINT_VP_MD) { 533 newBreakPoint = BREAK_POINT_MD; 534 } else { 535 newBreakPoint = BREAK_POINT_LG; 536 } 537 if (this.currentBreakPoint !== newBreakPoint) { 538 this.currentBreakPoint = newBreakPoint; 539 this.updateMargin(); 540 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 541 this.sideBarHelper?.updateLayout(this.currentBreakPoint, this.sideBarAttribute); 542 } 543 } 544 } 545 /** 546 * 更新边距 547 */ 548 updateMargin() { 549 switch (this.currentBreakPoint) { 550 case BREAK_POINT_MD: 551 this.marginWindowLeft = 24; 552 break; 553 case BREAK_POINT_LG: 554 this.marginWindowLeft = 32; 555 break; 556 case BREAK_POINT_SM: 557 default: 558 this.marginWindowLeft = 16; 559 break; 560 } 561 } 562 aboutToDisappear() { 563 if (this.onWindowSizeChangeCallback) { 564 this.mainWindow?.off('windowSizeChange', this.onWindowSizeChangeCallback); 565 } 566 } 567 /** 568 * 更新control button的可见性 569 */ 570 updateControlButtonVisibility() { 571 if (this.titleOptions?.titleBarType !== TitleBarType.DRAWER) { 572 return; 573 } 574 // 如果侧边栏显示，那么控制图标一定需要显示 575 if (this.sideBarAttribute.showSideBar && this.controlButtonVisible) { 576 return; 577 } 578 if (this.currentBreakPoint === BREAK_POINT_LG) { 579 if (this.sideBarAttribute.showSideBar) { 580 if (!this.controlButtonVisible) { 581 this.controlButtonVisible = true; 582 } 583 return; 584 } 585 if (!this.navigationBarVisibility && !this.sideBarAttribute.showSideBar) { 586 if (this.controlButtonVisible) { 587 this.controlButtonVisible = false; 588 } 589 } 590 else { 591 if (!this.controlButtonVisible) { 592 this.controlButtonVisible = true; 593 } 594 } 595 } 596 else { 597 if (this.controlButtonVisible !== this.navigationBarVisibility) { 598 this.controlButtonVisible = this.navigationBarVisibility; 599 } 600 } 601 } 602 drawerTitleBuilder(parent = null) { 603 this.observeComponentCreation2((elmtId, isInitialRender) => { 604 If.create(); 605 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.title) { 606 this.ifElseBranchUpdateFunction(0, () => { 607 this.observeComponentCreation2((elmtId, isInitialRender) => { 608 Row.create(); 609 Row.padding({ 610 start: LengthMetrics.vp(this.currentBreakPoint !== BREAK_POINT_LG ? this.marginWindowLeft + 36 + 8 : 611 (this.sideBarAttribute.showSideBar ? 8 : this.marginWindowLeft + 36 + 8)), 612 top: LengthMetrics.vp(10), 613 bottom: LengthMetrics.vp(10), 614 // 在Stack模式，或者非分栏模式下右侧需要有一定padding值，避免超长文本时不能避让menuBar 615 end: ((this.currentBreakPoint === BREAK_POINT_SM && 616 (this.mode === NavigationMode.Auto || !this.mode)) || this.mode === NavigationMode.Stack) ? 617 LengthMetrics.vp(this.titleBuilderPaddingEndWidth) : LengthMetrics.vp(0) 618 }); 619 Row.width('100%'); 620 }, Row); 621 this.observeComponentCreation2((elmtId, isInitialRender) => { 622 Text.create(this.title); 623 Text.maxLines(2); 624 Text.minFontSize(14); 625 Text.maxFontSize(26); 626 Text.height(36); 627 Text.fontColor({ 'id': -1, 'type': 10001, params: ['sys.color.font_primary'], 628 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 629 Text.textOverflow({ overflow: TextOverflow.Ellipsis }); 630 Text.fontWeight(FontWeight.Bold); 631 Text.width(0); 632 Text.layoutWeight(1); 633 Text.clip(true); 634 Text.textAlign(i18n.isRTL(i18n.System.getSystemLocale()) ? TextAlign.End : TextAlign.Start); 635 }, Text); 636 Text.pop(); 637 Row.pop(); 638 }); 639 } 640 else { 641 this.ifElseBranchUpdateFunction(1, () => { 642 }); 643 } 644 }, If); 645 If.pop(); 646 } 647 maskLayer(parent = null) { 648 this.observeComponentCreation2((elmtId, isInitialRender) => { 649 Column.create(); 650 Column.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 651 Column.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_mask_thin'], 652 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 653 Column.transition(TransitionEffect.opacity(0).animation({ duration: 500, curve: Curve.Linear })); 654 Column.width('100%'); 655 Column.height('100%'); 656 Column.accessibilityLevel('no'); 657 Column.onClick(() => { 658 this.changeSideBarWithAnimation(false); 659 }); 660 }, Column); 661 Column.pop(); 662 } 663 controlButton(parent = null) { 664 this.observeComponentCreation2((elmtId, isInitialRender) => { 665 If.create(); 666 if (this.sideBarAttribute.showSideBar) { 667 this.ifElseBranchUpdateFunction(0, () => { 668 this.observeComponentCreation2((elmtId, isInitialRender) => { 669 If.create(); 670 if (!this.sideBarOptions?.sideBarIcon) { 671 this.ifElseBranchUpdateFunction(0, () => { 672 this.observeComponentCreation2((elmtId, isInitialRender) => { 673 Button.createWithChild({ type: ButtonType.Circle }); 674 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 675 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 676 Button.width(36); 677 Button.height(36); 678 Button.borderRadius(18); 679 Button.margin({ 680 start: LengthMetrics.vp(this.marginWindowLeft), 681 }); 682 Button.zIndex(2); 683 Button.draggable(false); 684 Button.onClick(() => { 685 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 686 this.changeSideBarWithAnimation(isShowSideBar); 687 }); 688 Button.position({ 689 start: LengthMetrics.vp(0), 690 top: LengthMetrics.vp(8) 691 }); 692 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 693 }, Button); 694 this.observeComponentCreation2((elmtId, isInitialRender) => { 695 SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.open_sidebar'], 696 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 697 SymbolGlyph.fontWeight(FontWeight.Normal); 698 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 699 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 700 SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 701 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); 702 }, SymbolGlyph); 703 Button.pop(); 704 }); 705 } 706 else if (this.sideBarOptions?.sideBarIcon instanceof SymbolGlyphModifier) { 707 this.ifElseBranchUpdateFunction(1, () => { 708 this.observeComponentCreation2((elmtId, isInitialRender) => { 709 Button.createWithChild({ type: ButtonType.Circle }); 710 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 711 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 712 Button.width(36); 713 Button.height(36); 714 Button.borderRadius(18); 715 Button.margin({ 716 start: LengthMetrics.vp(this.marginWindowLeft), 717 }); 718 Button.zIndex(2); 719 Button.draggable(false); 720 Button.onClick(() => { 721 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 722 this.changeSideBarWithAnimation(isShowSideBar); 723 }); 724 Button.position({ 725 start: LengthMetrics.vp(0), 726 top: LengthMetrics.vp(8) 727 }); 728 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 729 }, Button); 730 this.observeComponentCreation2((elmtId, isInitialRender) => { 731 SymbolGlyph.create(); 732 SymbolGlyph.attributeModifier.bind(this)(this.sideBarOptions?.sideBarIcon); 733 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 734 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 735 SymbolGlyph.size({ 736 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 737 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 738 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 739 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 740 }); 741 }, SymbolGlyph); 742 Button.pop(); 743 }); 744 } 745 else { 746 this.ifElseBranchUpdateFunction(2, () => { 747 this.observeComponentCreation2((elmtId, isInitialRender) => { 748 Image.create(this.sideBarOptions?.sideBarIcon); 749 Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 750 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 751 Image.width(36); 752 Image.height(36); 753 Image.borderRadius(18); 754 Image.margin({ 755 start: LengthMetrics.vp(this.marginWindowLeft), 756 }); 757 Image.zIndex(2); 758 Image.draggable(false); 759 Image.onClick(() => { 760 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 761 this.changeSideBarWithAnimation(isShowSideBar); 762 }); 763 Image.position({ 764 start: LengthMetrics.vp(0), 765 top: LengthMetrics.vp(8) 766 }); 767 Image.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 768 }, Image); 769 }); 770 } 771 }, If); 772 If.pop(); 773 }); 774 } 775 else { 776 this.ifElseBranchUpdateFunction(1, () => { 777 this.observeComponentCreation2((elmtId, isInitialRender) => { 778 If.create(); 779 if (!this.titleOptions?.titleIcon) { 780 this.ifElseBranchUpdateFunction(0, () => { 781 this.observeComponentCreation2((elmtId, isInitialRender) => { 782 Button.createWithChild({ type: ButtonType.Circle }); 783 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 784 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 785 Button.width(36); 786 Button.height(36); 787 Button.borderRadius(18); 788 Button.margin({ 789 start: LengthMetrics.vp(this.marginWindowLeft), 790 }); 791 Button.zIndex(2); 792 Button.draggable(false); 793 Button.onClick(() => { 794 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 795 this.changeSideBarWithAnimation(isShowSideBar); 796 }); 797 Button.position({ 798 start: LengthMetrics.vp(0), 799 top: LengthMetrics.vp(8) 800 }); 801 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 802 }, Button); 803 this.observeComponentCreation2((elmtId, isInitialRender) => { 804 SymbolGlyph.create({ 'id': -1, 'type': 40000, params: ['sys.symbol.close_sidebar'], 'bundleName': 805 '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 806 SymbolGlyph.fontWeight(FontWeight.Normal); 807 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 808 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 809 SymbolGlyph.fontColor([{ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_titlebar_icon'], 810 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }]); 811 }, SymbolGlyph); 812 Button.pop(); 813 }); 814 } 815 else if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 816 this.ifElseBranchUpdateFunction(1, () => { 817 this.observeComponentCreation2((elmtId, isInitialRender) => { 818 Button.createWithChild({ type: ButtonType.Circle }); 819 Button.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 820 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 821 Button.width(36); 822 Button.height(36); 823 Button.borderRadius(18); 824 Button.margin({ 825 start: LengthMetrics.vp(this.marginWindowLeft), 826 }); 827 Button.zIndex(2); 828 Button.draggable(false); 829 Button.onClick(() => { 830 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 831 this.changeSideBarWithAnimation(isShowSideBar); 832 }); 833 Button.position({ 834 start: LengthMetrics.vp(0), 835 top: LengthMetrics.vp(8) 836 }); 837 Button.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 838 }, Button); 839 this.observeComponentCreation2((elmtId, isInitialRender) => { 840 SymbolGlyph.create(); 841 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 842 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 843 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 844 SymbolGlyph.size({ 845 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 846 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 847 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 848 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 849 }); 850 }, SymbolGlyph); 851 Button.pop(); 852 }); 853 } 854 else { 855 this.ifElseBranchUpdateFunction(2, () => { 856 this.observeComponentCreation2((elmtId, isInitialRender) => { 857 Image.create(this.titleOptions?.titleIcon); 858 Image.backgroundColor({ 'id': -1, 'type': 10001, params: ['sys.color.ohos_id_color_button_normal'], 859 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 860 Image.width(36); 861 Image.height(36); 862 Image.borderRadius(18); 863 Image.margin({ 864 start: LengthMetrics.vp(this.marginWindowLeft), 865 }); 866 Image.zIndex(2); 867 Image.draggable(false); 868 Image.onClick(() => { 869 const isShowSideBar = !this.sideBarHelper?.isShowSideBar(); 870 this.changeSideBarWithAnimation(isShowSideBar); 871 }); 872 Image.position({ 873 start: LengthMetrics.vp(0), 874 top: LengthMetrics.vp(8) 875 }); 876 Image.visibility(this.controlButtonVisible ? Visibility.Visible : Visibility.None); 877 }, Image); 878 }); 879 } 880 }, If); 881 If.pop(); 882 }); 883 } 884 }, If); 885 If.pop(); 886 } 887 sideBar(parent = null) { 888 this.observeComponentCreation2((elmtId, isInitialRender) => { 889 Row.create(); 890 Row.border({ width: { 891 left: 0, 892 right: '1px', 893 top: 0, 894 bottom: 0 895 }, 896 color: { 'id': -1, 'type': 10001, params: ['sys.color.comp_divider'], 897 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 898 style: { 899 right: BorderStyle.Solid 900 } }); 901 Row.alignItems(VerticalAlign.Top); 902 Row.width('100%'); 903 Row.height('100%'); 904 Row.padding({ top: 56 }); 905 Row.focusable(true); 906 Row.defaultFocus(true); 907 Row.backgroundColor(this.sideBarOptions?.sideBarBackground ?? { 'id': -1, 'type': 10001, 908 params: ['sys.color.ohos_id_color_sub_background'], 'bundleName': '__harDefaultBundleName__', 909 'moduleName': '__harDefaultModuleName__' }); 910 Row.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 911 }, Row); 912 this.observeComponentCreation2((elmtId, isInitialRender) => { 913 If.create(); 914 if (this.sideBarContent) { 915 this.ifElseBranchUpdateFunction(0, () => { 916 this.sideBarContent.bind(this)(); 917 }); 918 } 919 else { 920 this.ifElseBranchUpdateFunction(1, () => { 921 }); 922 } 923 }, If); 924 If.pop(); 925 Row.pop(); 926 } 927 roundIconBuilder(parent = null) { 928 this.observeComponentCreation2((elmtId, isInitialRender) => { 929 If.create(); 930 if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 931 this.ifElseBranchUpdateFunction(0, () => { 932 this.observeComponentCreation2((elmtId, isInitialRender) => { 933 Button.createWithChild({ type: ButtonType.Circle }); 934 Button.stateEffect(false); 935 Button.backgroundColor('rgba(0, 0, 0, 0)'); 936 Button.width(36); 937 Button.height(36); 938 Button.borderRadius(18); 939 Button.margin({ 940 start: LengthMetrics.vp(this.marginWindowLeft), 941 end: LengthMetrics.vp(8), 942 top: LengthMetrics.vp(10), 943 bottom: LengthMetrics.vp(10) 944 }); 945 Button.zIndex(2); 946 Button.draggable(false); 947 Button.position({ 948 start: LengthMetrics.vp(0), 949 top: LengthMetrics.vp(0) 950 }); 951 }, Button); 952 this.observeComponentCreation2((elmtId, isInitialRender) => { 953 SymbolGlyph.create(); 954 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 955 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 956 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 957 SymbolGlyph.size({ 958 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 959 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 960 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 961 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 962 }); 963 }, SymbolGlyph); 964 Button.pop(); 965 }); 966 } 967 else { 968 this.ifElseBranchUpdateFunction(1, () => { 969 this.observeComponentCreation2((elmtId, isInitialRender) => { 970 Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); 971 Image.backgroundColor('rgba(0, 0, 0, 0)'); 972 Image.width(36); 973 Image.height(36); 974 Image.borderRadius(18); 975 Image.margin({ 976 start: LengthMetrics.vp(this.marginWindowLeft), 977 end: LengthMetrics.vp(8), 978 top: LengthMetrics.vp(10), 979 bottom: LengthMetrics.vp(10) 980 }); 981 Image.zIndex(2); 982 Image.draggable(false); 983 Image.position({ 984 start: LengthMetrics.vp(0), 985 top: LengthMetrics.vp(0) 986 }); 987 }, Image); 988 }); 989 } 990 }, If); 991 If.pop(); 992 } 993 longIconBuilder(parent = null) { 994 this.observeComponentCreation2((elmtId, isInitialRender) => { 995 If.create(); 996 if (this.titleOptions?.titleIcon instanceof SymbolGlyphModifier) { 997 this.ifElseBranchUpdateFunction(0, () => { 998 this.observeComponentCreation2((elmtId, isInitialRender) => { 999 Button.createWithChild(); 1000 Button.height(36); 1001 Button.width(36); 1002 Button.margin({ 1003 start: LengthMetrics.vp(this.marginWindowLeft), 1004 end: LengthMetrics.vp(-12), 1005 top: LengthMetrics.vp(10), 1006 bottom: LengthMetrics.vp(10) 1007 }); 1008 Button.draggable(false); 1009 Button.position({ 1010 start: LengthMetrics.vp(0), 1011 top: LengthMetrics.vp(0) 1012 }); 1013 Button.backgroundColor('rgba(0, 0, 0, 0)'); 1014 Button.stateEffect(false); 1015 Button.type(ButtonType.Normal); 1016 }, Button); 1017 this.observeComponentCreation2((elmtId, isInitialRender) => { 1018 SymbolGlyph.create(); 1019 SymbolGlyph.attributeModifier.bind(this)(this.titleOptions?.titleIcon); 1020 SymbolGlyph.fontSize({ 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 1021 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }); 1022 SymbolGlyph.size({ 1023 width: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 1024 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' }, 1025 height: { 'id': -1, 'type': 10002, params: ['sys.float.ohos_id_text_size_headline7'], 1026 'bundleName': '__harDefaultBundleName__', 'moduleName': '__harDefaultModuleName__' } 1027 }); 1028 }, SymbolGlyph); 1029 Button.pop(); 1030 }); 1031 } 1032 else { 1033 this.ifElseBranchUpdateFunction(1, () => { 1034 this.observeComponentCreation2((elmtId, isInitialRender) => { 1035 Image.create(this.titleOptions?.titleIcon ?? this.atomicServiceIcon); 1036 Image.height(36); 1037 Image.width(36); 1038 Image.margin({ 1039 start: LengthMetrics.vp(this.marginWindowLeft), 1040 end: LengthMetrics.vp(-12), 1041 top: LengthMetrics.vp(10), 1042 bottom: LengthMetrics.vp(10) 1043 }); 1044 Image.draggable(false); 1045 Image.position({ 1046 start: LengthMetrics.vp(0), 1047 top: LengthMetrics.vp(0) 1048 }); 1049 Image.backgroundColor('rgba(0, 0, 0, 0)'); 1050 Image.objectFit(ImageFit.Auto); 1051 }, Image); 1052 }); 1053 } 1054 }, If); 1055 If.pop(); 1056 } 1057 titleBuilder(parent = null) { 1058 this.observeComponentCreation2((elmtId, isInitialRender) => { 1059 If.create(); 1060 if (this.titleOptions?.titleBarType === TitleBarType.SQUARED_ICON) { 1061 this.ifElseBranchUpdateFunction(0, () => { 1062 this.longIconBuilder.bind(this)(); 1063 }); 1064 } 1065 else { 1066 this.ifElseBranchUpdateFunction(1, () => { 1067 this.roundIconBuilder.bind(this)(); 1068 }); 1069 } 1070 }, If); 1071 If.pop(); 1072 } 1073 /** 1074 * 根据当前屏幕尺寸判断是否要显示用户插入的布局 1075 */ 1076 isShowMenus() { 1077 return this.mode === NavigationMode.Stack && this.currentBreakPoint !== BREAK_POINT_SM; 1078 } 1079 /** 1080 * 根据用户传入的类型和当前屏幕尺寸判断是否要显示NavigationMenuItem列表 1081 */ 1082 getMenuItemArray() { 1083 return this.isShowMenus() && this.menus instanceof Array ? this.menus : undefined; 1084 } 1085 initialRender() { 1086 this.observeComponentCreation2((elmtId, isInitialRender) => { 1087 Stack.create(); 1088 Stack.align(Alignment.TopStart); 1089 Stack.width('100%'); 1090 Stack.height('100%'); 1091 Stack.onSizeChange((oldValue, newValue) => { 1092 this.navigationWidth = newValue.width; 1093 this.navigationHeight = newValue.height; 1094 }); 1095 Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1096 }, Stack); 1097 this.observeComponentCreation2((elmtId, isInitialRender) => { 1098 Column.create(); 1099 }, Column); 1100 this.observeComponentCreation2((elmtId, isInitialRender) => { 1101 If.create(); 1102 if (this.gradientBackground !== undefined) { 1103 this.ifElseBranchUpdateFunction(0, () => { 1104 this.BackgroundBuilder.bind(this)(makeBuilderParameterProxy('BackgroundBuilder', { 1105 primaryColor: () => this.gradientBackground.primaryColor, 1106 secondaryColor: () => this.gradientBackground.secondaryColor, 1107 backgroundTheme: () => this.gradientBackground.backgroundTheme, 1108 mixMode: () => this.gradientBackground.mixMode, 1109 alpha: () => this.gradientBackground.alpha 1110 })); 1111 }); 1112 } else { 1113 this.ifElseBranchUpdateFunction(1, () => { 1114 }); 1115 } 1116 }, If); 1117 If.pop(); 1118 Column.pop(); 1119 this.observeComponentCreation2((elmtId, isInitialRender) => { 1120 If.create(); 1121 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER) { 1122 this.ifElseBranchUpdateFunction(0, () => { 1123 this.controlButton.bind(this)(); 1124 this.observeComponentCreation2((elmtId, isInitialRender) => { 1125 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1126 SideBarContainer.create(this.currentBreakPoint === BREAK_POINT_LG ? SideBarContainerType.Embed : 1127 SideBarContainerType.Overlay); 1128 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1129 SideBarContainer.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1130 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1131 SideBarContainer.sideBarWidth(this.sideBarAttribute.sideBarWidth); 1132 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1133 SideBarContainer.minContentWidth(this.sideBarAttribute.minContentWidthOfSideBar); 1134 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1135 SideBarContainer.minSideBarWidth(this.sideBarAttribute.minSideBarWidth); 1136 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1137 SideBarContainer.maxSideBarWidth(this.sideBarAttribute.maxSideBarWidth); 1138 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1139 SideBarContainer.showControlButton(false); 1140 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1141 SideBarContainer.showSideBar(this.sideBarAttribute.showSideBar); 1142 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1143 SideBarContainer.onChange((showSideBar) => { 1144 if (this.sideBarHelper?.isShowSideBar() !== showSideBar) { 1145 this.changeSideBarWithAnimation(showSideBar); 1146 } 1147 }); 1148 }, SideBarContainer); 1149 this.sideBar.bind(this)(); 1150 this.observeComponentCreation2((elmtId, isInitialRender) => { 1151 Stack.create(); 1152 Stack.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1153 }, Stack); 1154 this.observeComponentCreation2((elmtId, isInitialRender) => { 1155 Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); 1156 Navigation.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]); 1157 Navigation.title({ builder: () => { 1158 this.drawerTitleBuilder.call(this); 1159 } }, this.getTitleOption()); 1160 Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { 1161 this.menus.call(this); 1162 } } : this.getMenuItemArray()); 1163 Navigation.titleMode(NavigationTitleMode.Mini); 1164 Navigation.hideBackButton(true); 1165 Navigation.hideTitleBar(this.hideTitleBar); 1166 Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); 1167 Navigation.navBarPosition(NavBarPosition.Start); 1168 Navigation.mode(this.mode); 1169 Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) }); 1170 Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange)); 1171 Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth)); 1172 Navigation.onNavigationModeChange(this.modeChangeCallback); 1173 Navigation.onNavBarStateChange((visible) => { 1174 this.navigationBarVisibility = visible; 1175 this.updateControlButtonVisibility(); 1176 if (this.stateChangeCallback) { 1177 this.stateChangeCallback(visible); 1178 } 1179 }); 1180 }, Navigation); 1181 this.observeComponentCreation2((elmtId, isInitialRender) => { 1182 If.create(); 1183 if (this.navigationContent) { 1184 this.ifElseBranchUpdateFunction(0, () => { 1185 this.navigationContent.bind(this)(); 1186 }); 1187 } 1188 else { 1189 this.ifElseBranchUpdateFunction(1, () => { 1190 }); 1191 } 1192 }, If); 1193 If.pop(); 1194 Navigation.pop(); 1195 this.observeComponentCreation2((elmtId, isInitialRender) => { 1196 If.create(); 1197 if (this.titleOptions?.titleBarType === TitleBarType.DRAWER && this.sideBarAttribute.showSideBar && 1198 this.currentBreakPoint !== BREAK_POINT_LG && this.showMaskLayer) { 1199 this.ifElseBranchUpdateFunction(0, () => { 1200 this.maskLayer.bind(this)(); 1201 }); 1202 } 1203 else { 1204 this.ifElseBranchUpdateFunction(1, () => { 1205 }); 1206 } 1207 }, If); 1208 If.pop(); 1209 Stack.pop(); 1210 // 断点为LG时，侧边栏嵌入到组件内；断点为MD或SM时，侧边栏悬浮在B栏上 1211 SideBarContainer.pop(); 1212 }); 1213 } 1214 else { 1215 this.ifElseBranchUpdateFunction(1, () => { 1216 this.observeComponentCreation2((elmtId, isInitialRender) => { 1217 Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); 1218 Navigation.title((this.titleOptions?.titleIcon || (this.titleOptions?.titleBarType && !this.title)) ? { builder: () => { 1219 this.titleBuilder.call(this); 1220 } } : this.title, this.getTitleOption()); 1221 Navigation.titleMode(NavigationTitleMode.Mini); 1222 Navigation.menus(this.isShowMenus() && this.menus instanceof Function ? { builder: () => { 1223 this.menus.call(this); 1224 } } : this.getMenuItemArray()); 1225 Navigation.hideBackButton(true); 1226 Navigation.hideTitleBar(this.hideTitleBar); 1227 Navigation.navBarWidth(ObservedObject.GetRawObject(this.navBarWidth)); 1228 Navigation.navBarPosition(NavBarPosition.Start); 1229 Navigation.mode(this.mode); 1230 Navigation.navDestination({ builder: this.navDestinationBuilder.bind(this) }); 1231 Navigation.navBarWidthRange(ObservedObject.GetRawObject(this.navBarWidthRange)); 1232 Navigation.minContentWidth(ObservedObject.GetRawObject(this.minContentWidth)); 1233 Navigation.onNavBarStateChange(this.stateChangeCallback); 1234 Navigation.onNavigationModeChange(this.modeChangeCallback); 1235 }, Navigation); 1236 this.observeComponentCreation2((elmtId, isInitialRender) => { 1237 If.create(); 1238 if (this.navigationContent) { 1239 this.ifElseBranchUpdateFunction(0, () => { 1240 this.navigationContent.bind(this)(); 1241 }); 1242 } 1243 else { 1244 this.ifElseBranchUpdateFunction(1, () => { 1245 }); 1246 } 1247 }, If); 1248 If.pop(); 1249 Navigation.pop(); 1250 }); 1251 } 1252 }, If); 1253 If.pop(); 1254 Stack.pop(); 1255 } 1256 /** 1257 * 双色渐变下两种颜色各占50%的实现，把整个画布区域分为两个一样的矩形在绘制 1258 * @param context 画布上下文 1259 * @param primaryColor 第一种颜色 1260 * @param secondaryColor 第二种颜色 1261 */ 1262 drawGradientCanvasHalf(context, primaryColor, secondaryColor) { 1263 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1264 let grad1 = context.createLinearGradient(COORDINATE_NEGATIVE_ONE * this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 1265 height, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); 1266 let grad2 = context.createLinearGradient(this.navigationWidth * COLOR_RATIO_ONE_FIFTY_PERCENT, height, 1267 this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0); 1268 grad1.addColorStop(0, this.resourceColorToString(primaryColor)); 1269 grad1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1270 grad1.addColorStop(1, this.resourceColorToString(secondaryColor)); 1271 grad2.addColorStop(0, this.resourceColorToString(primaryColor)); 1272 grad2.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1273 grad2.addColorStop(1, this.resourceColorToString(secondaryColor)); 1274 context.fillStyle = grad1; 1275 context.fillRect(0, 0, this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, height); 1276 context.fillStyle = grad2; 1277 context.fillRect(this.navigationWidth * COLOR_RATIO_FIFTY_PERCENT, 0, this.navigationWidth, height); 1278 } 1279 /** 1280 * 双色渐变的一种实现，把画布先分为两个大矩形，再把其中一个矩形分为两个小矩形 1281 * @param context 画布上下文 1282 * @param primaryColor 第一种颜色 1283 * @param secondaryColor 第二种颜色 1284 */ 1285 drawGradientCanvasCross(context, primaryColor, secondaryColor) { 1286 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1287 let grad1 = context.createLinearGradient(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, 0); 1288 grad1.addColorStop(0, this.resourceColorToString(primaryColor)); 1289 grad1.addColorStop(COLOR_RATIO_FIFTY_PERCENT, this.resourceColorToString(primaryColor)); 1290 grad1.addColorStop(1, this.resourceColorToString(secondaryColor)); 1291 context.fillStyle = grad1; 1292 context.fillRect(0, 0, COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, height); 1293 let y1 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? 1294 COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : 0; 1295 let grad2 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y1, this.navigationWidth, 1296 height * COLOR_RATIO_FIFTY_PERCENT); 1297 grad2.addColorStop(0, this.resourceColorToString(secondaryColor)); 1298 grad2.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); 1299 grad2.addColorStop(1, this.resourceColorToString(primaryColor)); 1300 context.fillStyle = grad2; 1301 context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 0, 1302 this.navigationWidth * COLOR_RATIO_THIRTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE, 1303 height * COLOR_RATIO_FIFTY_PERCENT + RECTANGLE_OUTSIDE_OFFSET_ONE); 1304 let y2 = (COLOR_RATIO_FIFTY_PERCENT * height - COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth) > 0 ? 1305 COLOR_RATIO_FIFTY_PERCENT * height + COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth : height; 1306 let grad3 = context.createLinearGradient(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth, y2, 1307 this.navigationWidth, height * COLOR_RATIO_FIFTY_PERCENT); 1308 grad3.addColorStop(0, this.resourceColorToString(secondaryColor)); 1309 grad3.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(secondaryColor)); 1310 grad3.addColorStop(1, this.resourceColorToString(primaryColor)); 1311 context.fillStyle = grad3; 1312 context.fillRect(COLOR_RATIO_SEVENTY_PERCENT * this.navigationWidth - RECTANGLE_OUTSIDE_OFFSET_ONE, 1313 height * COLOR_RATIO_FIFTY_PERCENT, COLOR_RATIO_THIRTY_PERCENT * this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, 1314 height * COLOR_RATIO_FIFTY_PERCENT); 1315 } 1316 /** 1317 * 双色渐变的一种实现，从矩形左上角颜色渐变到右下角 1318 * @param context 画布上下文 1319 * @param primaryColor 第一种颜色 1320 * @param secondaryColor 第二种颜色 1321 */ 1322 drawGradientCanvasTowards(context, primaryColor, secondaryColor) { 1323 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1324 let grad = context.createLinearGradient(0, 0, this.navigationWidth, height); 1325 grad.addColorStop(0, this.resourceColorToString(primaryColor)); 1326 grad.addColorStop(COLOR_RATIO_FORTY_PERCENT, this.resourceColorToString(primaryColor)); 1327 grad.addColorStop(1, this.resourceColorToString(secondaryColor)); 1328 context.fillStyle = grad; 1329 context.fillRect(0, 0, this.navigationWidth, height); 1330 } 1331 /** 1332 * 双色渐变下透明效果的实现 1333 * @param context 画布上下文 1334 * @param backgroundTheme 背景色底色 1335 */ 1336 drawTransparentGradient(context, backgroundTheme) { 1337 let height = this.navigationHeight * COLOR_RATIO_THIRTY_PERCENT; 1338 let grad = context.createLinearGradient(0, 0, 0, height); 1339 grad.addColorStop(0, backGroundTransparentGradientColor[backgroundTheme - 1][0]); 1340 grad.addColorStop(1, backGroundTransparentGradientColor[backgroundTheme - 1][1]); 1341 context.fillStyle = grad; 1342 context.fillRect(0, 0, this.navigationWidth + RECTANGLE_OUTSIDE_OFFSET_ONE, height + 1343 RECTANGLE_OUTSIDE_OFFSET_ONE); 1344 if (backgroundTheme === BackgroundTheme.DARK) { 1345 context.fillStyle = Color.Black; 1346 context.fillRect(0, height, this.navigationWidth, this.navigationHeight - height); 1347 } 1348 } 1349 /** 1350 * 单色渐变： 1351 * @param context 画布上下文 1352 * @param primaryColor createLinearGradient初始颜色为primaryColor，结束颜色为底色 1353 * @param backgroundColor 颜色线性渐变的结束颜色 1354 */ 1355 drawSingleGradient(context, primaryColor, backgroundColor) { 1356 let height = this.navigationHeight * COLOR_RATIO_SIXTY_PERCENT; 1357 let grad1 = context.createLinearGradient(0, 0, 0, height); 1358 grad1.addColorStop(0, this.resourceColorToString(primaryColor)); 1359 grad1.addColorStop(1, backgroundColor); 1360 context.fillStyle = grad1; 1361 context.fillRect(0, 0, this.navigationWidth, height); 1362 //当背景为黑色的时候需要特殊处理下 1363 if (backgroundColor === backGroundColor[0]) { 1364 context.fillStyle = Color.Black; 1365 context.fillRect(0, height, this.navigationWidth, this.navigationHeight * (1 - COLOR_RATIO_SIXTY_PERCENT)); 1366 } 1367 } 1368 /** 1369 * ResourceColor转化为能作为addColorStop使用的字符串 1370 * @param resource ResourceColor = Color | number | string | Resource,对于Resource转化为直接使用的字符串需要特殊处理 1371 * @returns 1372 */ 1373 resourceColorToString(resource) { 1374 if (typeof resource === 'object') { 1375 try { 1376 return getContext(this).resourceManager.getStringSync(resource); 1377 } 1378 catch (error) { 1379 let code = error.code; 1380 let message = error.message; 1381 hilog.error(0x0000, 'AtomicServiceNavigation', 1382 `resourceColorToString - systemResourceManager getStringValue failed, error code: ${code}, message: ${message}.`); 1383 } 1384 return ''; 1385 } 1386 else { 1387 return resource.toString(); 1388 } 1389 } 1390 /** 1391 * 获取NavigationTitleOptions 1392 */ 1393 getTitleOption() { 1394 return { 1395 backgroundColor: this.titleOptions?.backgroundColor, 1396 backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, 1397 barStyle: this.titleOptions?.barStyle 1398 }; 1399 } 1400 /** 1401 * 更新control button的可见性，并运行动画效果 1402 */ 1403 changeSideBarWithAnimation(isShowSidebar) { 1404 Context.animateTo({ 1405 duration: 500, 1406 curve: curves.cubicBezierCurve(0.2, 0.2, 0.1, 1), 1407 onFinish: () => { 1408 this.showMaskLayer = isShowSidebar; 1409 } 1410 }, () => { 1411 if (this.sideBarHelper) { 1412 this.sideBarHelper.setShowSideBar(isShowSidebar); 1413 } 1414 this.showMaskLayer = true; 1415 }); 1416 } 1417 rerender() { 1418 this.updateDirtyElements(); 1419 } 1420} 1421/** 1422 * 侧边栏相关参数 1423 */ 1424let sideBarAttributeSet = class sideBarAttributeSet { 1425 constructor() { 1426 /** 1427 * 侧边栏宽度 1428 */ 1429 this.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1430 /** 1431 * 侧边栏最小宽度 1432 */ 1433 this.minSideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1434 /** 1435 * 侧边栏最大宽度 1436 */ 1437 this.maxSideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1438 /** 1439 * 侧边栏内容最小宽度 1440 */ 1441 this.minContentWidthOfSideBar = SIDE_BAR_COMMON_WIDTH; 1442 /** 1443 * 侧边栏显示隐藏状态 1444 */ 1445 this.showSideBar = false; 1446 } 1447}; 1448sideBarAttributeSet = __decorate([ 1449 Observed 1450], sideBarAttributeSet); 1451/** 1452 * 侧边栏辅助管理类 1453 */ 1454class SideBarHelper { 1455 constructor() { 1456 this.isExpandSideBar = false; 1457 } 1458 /** 1459 * 注册侧边栏显隐状态变化监听 1460 * 1461 * @param listener 监听器对象 1462 */ 1463 registerListener(listener) { 1464 this.listener = listener; 1465 } 1466 /** 1467 * 取消注册监听 1468 */ 1469 unregisterListener() { 1470 this.listener = undefined; 1471 } 1472 /** 1473 * 获取侧边栏显示隐藏状态 1474 * 1475 * @returns 侧边栏是否显示 1476 */ 1477 isShowSideBar() { 1478 return this.isExpandSideBar; 1479 } 1480 /** 1481 * 设置侧边栏显示隐藏状态 1482 * 1483 * @param value 显示或隐藏状态 1484 */ 1485 setShowSideBar(value) { 1486 this.isExpandSideBar = value; 1487 if (this.listener) { 1488 this.listener(value); 1489 } 1490 } 1491 /** 1492 * 更新侧边栏布局 1493 * 1494 * @param breakPoint 当前断点 1495 * @param layout 布局参数 1496 */ 1497 updateLayout(breakPoint, layout) { 1498 if (breakPoint === BREAK_POINT_LG) { 1499 this.updateLGLayout(layout); 1500 } 1501 else { 1502 this.updateCommonLayout(layout); 1503 } 1504 } 1505 /** 1506 * 更新除LG外窗口模式的布局 1507 */ 1508 updateCommonLayout(layout) { 1509 layout.sideBarWidth = SIDE_BAR_OVERLAY_WIDTH; 1510 layout.minContentWidthOfSideBar = '100%'; 1511 } 1512 /** 1513 * 更新LG窗口模式布局 1514 */ 1515 updateLGLayout(layout) { 1516 layout.sideBarWidth = SIDE_BAR_EMBED_MIN_WIDTH; 1517 layout.minContentWidthOfSideBar = CONTENT_MIN_WIDTH; 1518 } 1519} 1520/** 1521 * 标题栏类型 1522 */ 1523export let TitleBarType; 1524(function (TitleBarType) { 1525 /** 1526 * 长图标类型标题栏 1527 */ 1528 TitleBarType.SQUARED_ICON = 1; 1529 /** 1530 * 圆形图标类型标题栏 1531 */ 1532 TitleBarType.ROUND_ICON = 2; 1533 /** 1534 * 抽屉类型标题栏 1535 */ 1536 TitleBarType.DRAWER = 3; 1537})(TitleBarType || (TitleBarType = {})); 1538//# sourceMappingURL=AtomicServiceNavigation.js.map 1539export default { 1540 AtomicServiceNavigation, 1541 MixMode, 1542 GradientAlpha, 1543 BackgroundTheme, 1544 TitleBarType 1545};