• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023-2025 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 */
15
16import { Theme } from '@ohos.arkui.theme';
17import { LengthMetrics, LengthUnit, ColorMetrics } from '@ohos.arkui.node';
18import { DividerModifier, SymbolGlyphModifier } from '@ohos.arkui.modifier';
19import hilog from '@ohos.hilog';
20import window from '@ohos.window';
21import common from '@ohos.app.ability.common';
22import { BusinessError } from '@ohos.base';
23
24export enum ItemState {
25  ENABLE = 1,
26  DISABLE = 2,
27  ACTIVATE = 3,
28}
29
30// “更多”栏图标
31const PUBLIC_MORE: Resource = $r('sys.symbol.dot_grid_2x2');
32const IMAGE_SIZE: string = '24vp';
33const DEFAULT_TOOLBAR_HEIGHT: number = 56;
34const TOOLBAR_MAX_LENGTH: number = 5;
35const MAX_FONT_SIZE = 3.2;
36const DIALOG_IMAGE_SIZE = '64vp';
37const MAX_DIALOG = '256vp';
38const MIN_DIALOG = '216vp';
39const TEXT_TOOLBAR_DIALOG = '18.3fp';
40const FOCUS_BOX_MARGIN: number = -2;
41const FOCUS_BOX_BORDER_WIDTH: number = 2;
42const RESOURCE_TYPE_SYMBOL: number = 40000;
43
44interface MenuController {
45  value: ResourceStr;
46  action: () => void;
47  enabled?: boolean;
48}
49
50export interface ToolBarSymbolGlyphOptions {
51  normal?: SymbolGlyphModifier;
52  activated?: SymbolGlyphModifier;
53}
54
55class ButtonGestureModifier implements GestureModifier {
56  public static readonly longPressTime: number = 500;
57  public static readonly minFontSize: number = 1.75;
58  public fontSize: number = 1;
59  public controller: CustomDialogController | null = null;
60
61  constructor(controller: CustomDialogController | null) {
62    this.controller = controller;
63  }
64
65  applyGesture(event: UIGestureEvent): void {
66    if (this.fontSize >= ButtonGestureModifier.minFontSize) {
67      event.addGesture(
68        new LongPressGestureHandler({ repeat: false, duration: ButtonGestureModifier.longPressTime })
69          .onAction(() => {
70            if (event) {
71              this.controller?.open();
72            }
73          })
74          .onActionEnd(() => {
75            this.controller?.close();
76          })
77          .onActionCancel(() => {
78            this.controller?.close();
79          })
80      )
81    } else {
82      event.clearGestures();
83    }
84  }
85}
86
87class Util {
88  public static isSymbolResource(resourceStr: ResourceStr | undefined | null): boolean {
89    if (!Util.isResourceType(resourceStr)) {
90      return false;
91    }
92    let resource: Resource = resourceStr as Resource;
93    return resource.type === RESOURCE_TYPE_SYMBOL;
94  }
95
96  public static isResourceType(resource: ResourceStr | Resource | undefined | null): boolean {
97    if (!resource) {
98      return false;
99    }
100    if (typeof resource === 'string' || typeof resource === 'undefined') {
101      return false;
102    }
103    return true;
104  }
105}
106
107@Observed
108export class ToolBarOption {
109  public content: ResourceStr = '';
110  public action?: () => void = undefined;
111  public icon?: Resource = undefined;
112  public state?: ItemState = 1;
113  public iconColor?: ResourceColor = $r('sys.color.icon_primary');
114  public activatedIconColor?: ResourceColor = $r('sys.color.icon_emphasize');
115  public textColor?: ResourceColor = $r('sys.color.font_primary');
116  public activatedTextColor?: ResourceColor = $r('sys.color.font_emphasize');
117  public toolBarSymbolOptions?: ToolBarSymbolGlyphOptions = undefined;
118  public accessibilityText?: ResourceStr = '';
119  public accessibilityDescription?: ResourceStr = '';
120  public accessibilityLevel?: string = 'auto';
121}
122
123@Observed
124export class ToolBarOptions extends Array<ToolBarOption> {
125}
126
127export class ToolBarModifier implements AttributeModifier<ColumnAttribute> {
128  public backgroundColorValue?: ResourceColor = $r('sys.color.ohos_id_color_toolbar_bg');
129  public heightValue?: LengthMetrics = LengthMetrics.vp(DEFAULT_TOOLBAR_HEIGHT);
130  public stateEffectValue?: boolean = true;
131  public paddingValue?: LengthMetrics = LengthMetrics.resource($r('sys.float.padding_level12'));
132
133  applyNormalAttribute(instance: ColumnAttribute): void {
134    instance.backgroundColor(this.backgroundColorValue);
135  }
136
137  public backgroundColor(backgroundColor: ResourceColor): ToolBarModifier {
138    this.backgroundColorValue = backgroundColor;
139    return this;
140  }
141
142  public height(height: LengthMetrics): ToolBarModifier {
143    this.heightValue = height;
144    return this;
145  }
146
147  public stateEffect(stateEffect: boolean): ToolBarModifier {
148    this.stateEffectValue = stateEffect;
149    return this;
150  }
151
152  public padding(padding: LengthMetrics): ToolBarModifier {
153    this.paddingValue = padding;
154    return this;
155  }
156}
157
158class ToolBarTheme {
159  public iconPrimaryColor: ResourceColor = $r('sys.color.icon_primary');
160  public iconActivePrimaryColor: ResourceColor = $r('sys.color.icon_emphasize');
161  public fontPrimaryColor: ResourceColor = $r('sys.color.font_primary');
162  public fontActivatedPrimaryColor: ResourceColor = $r('sys.color.font_emphasize');
163}
164
165@Component
166export struct ToolBar {
167  @ObjectLink toolBarList: ToolBarOptions;
168  controller: TabsController = new TabsController();
169  @Prop activateIndex: number = -1;
170  @Prop dividerModifier: DividerModifier;
171  @Prop toolBarModifier: ToolBarModifier;
172  @Prop moreText: Resource = $r('sys.string.ohos_toolbar_more');
173  @State menuContent: MenuController[] = [];
174  @State toolBarItemBackground: ResourceColor[] = [];
175  @State toolBarTheme: ToolBarTheme = new ToolBarTheme();
176  @State fontSize: number = 1;
177  isFollowSystem: boolean = false;
178  maxFontSizeScale: number = 3.2;
179  moreIndex: number = 4;
180  moreItem: ToolBarOption = {
181    content: $r('sys.string.ohos_toolbar_more'),
182    icon: PUBLIC_MORE,
183  }
184
185  onWillApplyTheme(theme: Theme) {
186    this.toolBarTheme.iconPrimaryColor = theme.colors.iconPrimary;
187    this.toolBarTheme.iconActivePrimaryColor = theme.colors.iconEmphasize;
188    this.toolBarTheme.fontPrimaryColor = theme.colors.fontPrimary;
189    this.toolBarTheme.fontActivatedPrimaryColor = theme.colors.fontEmphasize;
190  }
191
192  @Builder
193  MoreTabBuilder(index: number) {
194    Button({ type: ButtonType.Normal, stateEffect: false }) {
195      Column() {
196        SymbolGlyph(PUBLIC_MORE)
197          .fontSize(IMAGE_SIZE)
198          .fontColor([this.toolBarTheme.iconPrimaryColor])
199          .draggable(false)
200          .margin({ bottom: $r('sys.float.padding_level1') })
201        Text(this.moreText)
202          .fontColor(this.toolBarTheme.fontPrimaryColor)
203          .fontSize($r('sys.float.ohos_id_text_size_caption'))
204          .fontWeight(FontWeight.Medium)
205          .maxLines(1)
206          .textOverflow({ overflow: TextOverflow.Ellipsis })
207          .textAlign(TextAlign.Center)
208          .focusable(true)
209          .focusOnTouch(true)
210      }
211      .width('100%')
212      .height('100%')
213      .justifyContent(FlexAlign.Center)
214      .padding({
215        start: LengthMetrics.resource($r('sys.float.padding_level2')),
216        end: LengthMetrics.resource($r('sys.float.padding_level2')),
217      })
218      .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
219    }
220    .accessibilityGroup(true)
221    .focusable(true)
222    .focusOnTouch(true)
223    .focusBox({
224      margin: LengthMetrics.vp(FOCUS_BOX_MARGIN),
225      strokeWidth: LengthMetrics.vp(FOCUS_BOX_BORDER_WIDTH),
226      strokeColor: ColorMetrics.resourceColor($r('sys.color.ohos_id_color_focused_outline'))
227    })
228    .width('100%')
229    .height('100%')
230    .bindMenu(this.menuContent, { placement: Placement.TopRight, offset: { x: -12, y: -10 } })
231    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
232    .backgroundColor(this.toolBarItemBackground[index])
233    .onHover((isHover: boolean) => {
234      if (isHover) {
235        this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_hover');
236      } else {
237        this.toolBarItemBackground[index] = Color.Transparent;
238      }
239    })
240    .stateStyles({
241      pressed: {
242        .backgroundColor((!this.toolBarModifier?.stateEffectValue) ?
243        this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect'))
244      }
245    })
246    .gestureModifier(this.getItemGestureModifier(this.moreItem, index))
247  }
248
249  @Builder
250  TabBuilder(index: number) {
251    Button({ type: ButtonType.Normal, stateEffect: false }) {
252      Column() {
253        if (this.toolBarList[index]?.toolBarSymbolOptions?.normal ||
254          this.toolBarList[index]?.toolBarSymbolOptions?.activated) {
255          SymbolGlyph()
256            .fontSize(IMAGE_SIZE)
257            .symbolEffect(new SymbolEffect(), false)
258            .attributeModifier(this.getToolBarSymbolModifier(index))
259            .margin({ bottom: $r('sys.float.padding_level1') })
260        } else if (Util.isSymbolResource(this.toolBarList[index]?.icon)) {
261          SymbolGlyph(this.toolBarList[index]?.icon)
262            .fontSize(IMAGE_SIZE)
263            .fontColor([this.getIconColor(index)])
264            .margin({ bottom: $r('sys.float.padding_level1') })
265        } else {
266          Image(this.toolBarList[index]?.icon)
267            .width(IMAGE_SIZE)
268            .height(IMAGE_SIZE)
269            .fillColor(this.getIconColor(index))
270            .margin({ bottom: $r('sys.float.padding_level1') })
271            .objectFit(ImageFit.Contain)
272            .draggable(false)
273        }
274        Text(this.toolBarList[index]?.content)
275          .fontColor(this.getTextColor(index))
276          .fontSize($r('sys.float.ohos_id_text_size_caption'))
277          .maxFontSize($r('sys.float.ohos_id_text_size_caption'))
278          .minFontSize(9)
279          .fontWeight(FontWeight.Medium)
280          .maxLines(1)
281          .textOverflow({ overflow: TextOverflow.Ellipsis })
282          .textAlign(TextAlign.Center)
283          .focusable(!(this.toolBarList[index]?.state === ItemState.DISABLE))
284          .focusOnTouch(!(this.toolBarList[index]?.state === ItemState.DISABLE))
285      }
286      .justifyContent(FlexAlign.Center)
287      .width('100%')
288      .height('100%')
289      .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
290      .padding({
291        start: LengthMetrics.resource($r('sys.float.padding_level2')),
292        end: LengthMetrics.resource($r('sys.float.padding_level2')),
293      })
294    }
295    .accessibilityGroup(true)
296    .accessibilityText(this.toolBarList[index]?.accessibilityText as Resource ??
297      this.toolBarList[index]?.content as Resource)
298    .accessibilityDescription(this.toolBarList[index]?.accessibilityDescription as string ?? '')
299    .accessibilityLevel(this.toolBarList[index]?.accessibilityLevel ?? 'auto')
300    .enabled(this.toolBarList[index]?.state !== ItemState.DISABLE)
301    .width('100%')
302    .height('100%')
303    .borderRadius($r('sys.float.ohos_id_corner_radius_clicked'))
304    .focusable(!(this.toolBarList[index]?.state === ItemState.DISABLE))
305    .focusOnTouch(!(this.toolBarList[index]?.state === ItemState.DISABLE))
306    .focusBox({
307      margin: LengthMetrics.vp(FOCUS_BOX_MARGIN),
308      strokeWidth: LengthMetrics.vp(FOCUS_BOX_BORDER_WIDTH),
309      strokeColor: ColorMetrics.resourceColor($r('sys.color.ohos_id_color_focused_outline'))
310    })
311    .backgroundColor(this.toolBarItemBackground[index])
312    .onHover((isHover: boolean) => {
313      if (isHover && this.toolBarList[index]?.state !== ItemState.DISABLE) {
314        this.toolBarItemBackground[index] = $r('sys.color.ohos_id_color_hover');
315      } else {
316        this.toolBarItemBackground[index] = Color.Transparent;
317      }
318    })
319    .stateStyles({
320      pressed: {
321        .backgroundColor((this.toolBarList[index]?.state === ItemState.DISABLE) ||
322          (!this.toolBarModifier?.stateEffectValue) ?
323        this.toolBarItemBackground[index] : $r('sys.color.ohos_id_color_click_effect'))
324      }
325    })
326    .onClick(() => {
327      this.clickEventAction(index);
328    })
329    .gestureModifier(this.getItemGestureModifier(this.toolBarList[index], index))
330  }
331
332  private getFontSizeScale(): number {
333    let context = this.getUIContext();
334    let fontScaleSystem = (context.getHostContext() as common.UIAbilityContext)?.config?.fontSizeScale ?? 1;
335    if (!this.isFollowSystem) {
336      return 1;
337    } else {
338      return Math.min(fontScaleSystem, this.maxFontSizeScale);
339    }
340  }
341
342  private getToolBarSymbolModifier(index: number): SymbolGlyphModifier | undefined {
343    if ((!this.toolBarList[index]?.toolBarSymbolOptions?.activated) &&
344      (!this.toolBarList[index]?.toolBarSymbolOptions?.normal)) {
345      return undefined;
346    }
347    if (this.activateIndex === index && (this.toolBarList[index]?.state === ItemState.ACTIVATE)) {
348      return this.toolBarList[index]?.toolBarSymbolOptions?.activated;
349    }
350    return this.toolBarList[index]?.toolBarSymbolOptions?.normal;
351  }
352
353  private getIconColor(index: number): ResourceColor {
354    if (this.activateIndex === index && (this.toolBarList[index]?.state === ItemState.ACTIVATE)) {
355      return this.toolBarList[index]?.activatedIconColor ?? this.toolBarTheme.iconActivePrimaryColor;
356    }
357    return this.toolBarList[index]?.iconColor ?? this.toolBarTheme.iconPrimaryColor;
358  }
359
360  private getTextColor(index: number): ResourceColor {
361    if (this.activateIndex === index && (this.toolBarList[index]?.state === ItemState.ACTIVATE)) {
362      return this.toolBarList[index]?.activatedTextColor ?? this.toolBarTheme.fontActivatedPrimaryColor;
363    }
364    return this.toolBarList[index]?.textColor ?? this.toolBarTheme.fontPrimaryColor;
365  }
366
367  private toLengthString(value: LengthMetrics | undefined): string {
368    if (value === void (0)) {
369      return '';
370    }
371    const length: number = value.value;
372    let lengthString: string = '';
373    switch (value.unit) {
374      case LengthUnit.PX:
375        lengthString = `${length}px`;
376        break;
377      case LengthUnit.FP:
378        lengthString = `${length}fp`;
379        break;
380      case LengthUnit.LPX:
381        lengthString = `${length}lpx`;
382        break;
383      case LengthUnit.PERCENT:
384        lengthString = `${length * 100}%`;
385        break;
386      case LengthUnit.VP:
387        lengthString = `${length}vp`;
388        break;
389      default:
390        lengthString = `${length}vp`;
391        break;
392    }
393    return lengthString;
394  }
395
396  private clickEventAction(index: number): void {
397    let toolbar = this.toolBarList[index];
398    if (toolbar.state === ItemState.ACTIVATE) {
399      if (this.activateIndex === index) {
400        this.activateIndex = -1;
401      } else {
402        this.activateIndex = index;
403      }
404    }
405    if (!(toolbar.state === ItemState.DISABLE)) {
406      toolbar.action && toolbar.action();
407    }
408  }
409
410  private getItemGestureModifier(item: ToolBarOption, index: number): ButtonGestureModifier {
411    let buttonGestureModifier: ButtonGestureModifier = new ButtonGestureModifier(null);
412    if (item?.icon || item?.toolBarSymbolOptions?.activated || item?.toolBarSymbolOptions?.normal) {
413      buttonGestureModifier = new ButtonGestureModifier(new CustomDialogController({
414        builder: ToolBarDialog({
415          itemDialog: item,
416          fontSize: this.fontSize,
417          itemSymbolModifier: this.getToolBarSymbolModifier(index),
418        }),
419        maskColor: Color.Transparent,
420        isModal: true,
421        customStyle: true,
422      }))
423      buttonGestureModifier.fontSize = this.fontSize;
424    }
425    return buttonGestureModifier;
426  }
427
428  refreshData() {
429    this.dividerModifier = this.dividerModifier ? this.dividerModifier : new DividerModifier();
430    this.toolBarModifier = this.toolBarModifier ? this.toolBarModifier : new ToolBarModifier()
431      .padding(LengthMetrics.resource($r('sys.float.padding_level12')))
432      .stateEffect(true)
433      .height(LengthMetrics.vp(DEFAULT_TOOLBAR_HEIGHT))
434      .backgroundColor('sys.color.ohos_id_color_toolbar_bg');
435    this.menuContent = [];
436    for (let i = 0; i < this.toolBarList.length; i++) {
437      if (i >= this.moreIndex && this.toolBarList.length > TOOLBAR_MAX_LENGTH) {
438        this.menuContent[i - this.moreIndex] = {
439          value: this.toolBarList[i].content,
440          action: this.toolBarList[i].action ? this.toolBarList[i].action as () => void : () => {
441          },
442          enabled: this.toolBarList[i].state !== ItemState.DISABLE,
443        }
444      } else {
445        this.menuContent = [];
446      }
447      this.toolBarItemBackground[i] = this.toolBarItemBackground[i] ?? Color.Transparent;
448    }
449    return true;
450  }
451
452  onMeasureSize(selfLayoutInfo: GeometryInfo, children: Measurable[], constraint: ConstraintSizeOptions): SizeResult {
453    this.fontSize = this.getFontSizeScale();
454    let sizeResult: SizeResult = { height: 0, width: 0 };
455    children.forEach((child) => {
456      let childMeasureResult: MeasureResult = child.measure(constraint);
457      sizeResult.width = childMeasureResult.width;
458      sizeResult.height = childMeasureResult.height;
459    });
460    return sizeResult;
461  }
462
463  aboutToAppear() {
464    this.refreshData();
465    try {
466      this.isFollowSystem = this.getUIContext()?.isFollowingSystemFontScale();
467      this.maxFontSizeScale = this.getUIContext()?.getMaxFontScale();
468    } catch (err) {
469      let code: number = (err as BusinessError)?.code;
470      let message: string = (err as BusinessError)?.message;
471      hilog.error(0x3900, 'Ace', `Faild to toolBar getMaxFontScale, code: ${code}, message: ${message}`);
472    }
473  }
474
475  build() {
476    Column() {
477      Tabs({ controller: this.controller }) {
478      }
479      .visibility(Visibility.None)
480
481      Divider()
482        .width('100%').height(1)
483        .attributeModifier(this.dividerModifier)
484      Row() {
485        ForEach(this.toolBarList, (item: ToolBarOption, index: number) => {
486          if (this.toolBarList.length <= TOOLBAR_MAX_LENGTH || index < this.moreIndex) {
487            Row() {
488              this.TabBuilder(index);
489            }
490            .height('100%')
491            .flexShrink(1)
492          }
493        }, (item: ToolBarOption, index: number) => {
494          return `${this.getUniqueId()}__${index}}`;
495        })
496        if (this.refreshData() && this.toolBarList.length > TOOLBAR_MAX_LENGTH) {
497          Row() {
498            this.MoreTabBuilder(this.moreIndex);
499          }
500          .height('100%')
501          .flexShrink(1)
502        }
503      }
504      .justifyContent(FlexAlign.Center)
505      .constraintSize({
506        minHeight: this.toLengthString(this.toolBarModifier?.heightValue),
507        maxHeight: this.toLengthString(this.toolBarModifier?.heightValue),
508      })
509      .width('100%')
510      .height(this.toLengthString(this.toolBarModifier?.heightValue))
511      .padding({
512        start: this.toolBarList.length < TOOLBAR_MAX_LENGTH ?
513          this.toolBarModifier?.paddingValue : LengthMetrics.resource($r('sys.float.padding_level0')),
514        end: this.toolBarList.length < TOOLBAR_MAX_LENGTH ?
515          this.toolBarModifier?.paddingValue : LengthMetrics.resource($r('sys.float.padding_level0')),
516      })
517    }
518    .attributeModifier(this.toolBarModifier)
519  }
520}
521
522/**
523 * ToolBarDialog
524 *
525 * @since 2024-07-23
526 */
527@CustomDialog
528struct ToolBarDialog {
529  itemDialog: ToolBarOption = {
530    icon: undefined,
531    content: '',
532  };
533  itemSymbolModifier?: SymbolGlyphModifier;
534  mainWindowStage: window.Window | undefined = undefined;
535  controller?: CustomDialogController
536  screenWidth: number = 640;
537  verticalScreenLines: number = 6;
538  horizontalsScreenLines: number = 1;
539  cancel: () => void = () => {
540  }
541  confirm: () => void = () => {
542  }
543  @StorageLink('mainWindow') mainWindow: Promise<window.Window> | undefined = undefined;
544  @Prop fontSize: number = 1;
545  @State maxLines: number = 1;
546  @StorageProp('windowStandardHeight') windowStandardHeight: number = 0;
547  @State symbolEffect: SymbolEffect = new SymbolEffect();
548
549  build() {
550    if (this.itemDialog.content) {
551      Column() {
552        if (this.itemDialog.toolBarSymbolOptions?.normal ||
553          this.itemDialog.toolBarSymbolOptions?.activated) {
554          SymbolGlyph()
555            .attributeModifier(this.itemSymbolModifier)
556            .symbolEffect(this.symbolEffect, false)
557            .fontColor([$r('sys.color.icon_primary')])
558            .fontSize(DIALOG_IMAGE_SIZE)
559            .margin({
560              top: $r('sys.float.padding_level24'),
561              bottom: $r('sys.float.padding_level8'),
562            })
563        } else if (Util.isSymbolResource(this.itemDialog.icon)) {
564          SymbolGlyph(this.itemDialog?.icon)
565            .fontColor([$r('sys.color.icon_primary')])
566            .fontSize(DIALOG_IMAGE_SIZE)
567            .margin({
568              top: $r('sys.float.padding_level24'),
569              bottom: $r('sys.float.padding_level8'),
570            })
571        } else {
572          Image(this.itemDialog.icon)
573            .width(DIALOG_IMAGE_SIZE)
574            .height(DIALOG_IMAGE_SIZE)
575            .margin({
576              top: $r('sys.float.padding_level24'),
577              bottom: $r('sys.float.padding_level8'),
578            })
579            .fillColor($r('sys.color.icon_primary'))
580        }
581        Column() {
582          Text(this.itemDialog.content)
583            .fontSize(TEXT_TOOLBAR_DIALOG)
584            .textOverflow({ overflow: TextOverflow.Ellipsis })
585            .maxLines(this.maxLines)
586            .width('100%')
587            .textAlign(TextAlign.Center)
588            .fontColor($r('sys.color.font_primary'))
589        }
590        .width('100%')
591        .padding({
592          left: $r('sys.float.padding_level4'),
593          right: $r('sys.float.padding_level4'),
594          bottom: $r('sys.float.padding_level12'),
595        })
596      }
597      .width(this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG)
598      .constraintSize({ minHeight: this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG })
599      .backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK)
600      .shadow(ShadowStyle.OUTER_DEFAULT_LG)
601      .borderRadius(($r('sys.float.corner_radius_level10')))
602    } else {
603      Column() {
604        if (this.itemDialog.toolBarSymbolOptions?.normal ||
605          this.itemDialog.toolBarSymbolOptions?.activated) {
606          SymbolGlyph()
607            .attributeModifier(this.itemSymbolModifier)
608            .symbolEffect(this.symbolEffect, false)
609            .fontColor([$r('sys.color.icon_primary')])
610            .fontSize(DIALOG_IMAGE_SIZE)
611        } else if (Util.isSymbolResource(this.itemDialog.icon)) {
612          SymbolGlyph(this.itemDialog?.icon)
613            .fontColor([$r('sys.color.icon_primary')])
614            .fontSize(DIALOG_IMAGE_SIZE)
615        } else {
616          Image(this.itemDialog.icon)
617            .width(DIALOG_IMAGE_SIZE)
618            .height(DIALOG_IMAGE_SIZE)
619            .fillColor($r('sys.color.icon_primary'))
620        }
621      }
622      .width(this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG)
623      .constraintSize({ minHeight: this.fontSize === MAX_FONT_SIZE ? MAX_DIALOG : MIN_DIALOG })
624      .backgroundBlurStyle(BlurStyle.COMPONENT_ULTRA_THICK)
625      .shadow(ShadowStyle.OUTER_DEFAULT_LG)
626      .borderRadius(($r('sys.float.corner_radius_level10')))
627      .justifyContent(FlexAlign.Center)
628    }
629  }
630
631  async aboutToAppear(): Promise<void> {
632    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
633    this.mainWindowStage = context.windowStage.getMainWindowSync();
634    let properties: window.WindowProperties = this.mainWindowStage.getWindowProperties();
635    let rect = properties.windowRect;
636    if (px2vp(rect.height) > this.screenWidth) {
637      this.maxLines = this.verticalScreenLines;
638    } else {
639      this.maxLines = this.horizontalsScreenLines;
640    }
641  }
642}