• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 弹出框层级管理
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @houguobiao-->
5<!--Designer: @houguobiao-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8ArkUI的弹出框节点都是直接挂载在根节点上，会根据层级从小到大依次挂载。根节点下，右边的弹出框节点会覆盖显示在左边的弹出框节点上，新创建的弹出框节点会根据层级大小插入到对应的位置，同一层级大小的弹窗节点按照创建的先后顺序进行挂载。
9
10从API version 18开始，可以通过设置[levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11)参数来管理弹出框的显示顺序，确保层级较高的弹出框覆盖在层级较低的弹出框之上，从而根据需要灵活控制各层弹出框的显示效果。
11
12## 使用约束
13
14目前[openCustomDialog](arkts-uicontext-custom-dialog.md)、[CustomDialog](arkts-common-components-custom-dialog.md)、[AlertDialog](arkts-fixes-style-dialog.md#警告弹窗-alertdialog)、[ActionSheet](arkts-fixes-style-dialog.md#列表选择弹窗-actionsheet)、[showDialog](arkts-fixes-style-dialog.md#对话框-showdialog)支持通过levelOrder参数来管理弹出框的层次。
15
16> **说明：**
17>
18> 弹出框层级管理不支持子窗场景，即当showInSubWindow设置为true时，levelOrder参数设置无效。不支持动态刷新弹出框的显示顺序。
19
20## 创建不同层级的弹出框
21
22> **说明：**
23>
24> 详细变量定义请参考[完整示例](#完整示例)。
25
261.初始化一个弹出框内容区，内部包含一个Text组件。
27
28```ts
29@Builder normalCustomDialog(index: number) {
30  Column() {
31    Text("我是普通弹窗" + index).fontSize(30)
32  }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
33}
34```
35
362.初始化另一个弹出框内容区，内部包含一个点击打开普通弹出框的按钮，点击事件中通过调用[UIContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md)中[getPromptAction](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#getpromptaction)方法获取[PromptAction](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md)对象，再通过该对象调用[openCustomDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialog12)接口，并且设置层级为0的[levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11)参数来创建普通层级弹出框。
37
38```ts
39@Builder topCustomDialog() {
40  Column() {
41    Text("我是置顶弹窗").fontSize(30)
42    Row({ space: 50 }) {
43      Button('点我打开普通弹窗')
44        .onClick(() => {
45          this.getUIContext().getPromptAction().openCustomDialog({
46            builder: () => {
47              this.normalCustomDialog(this.dialogIndex)
48            },
49            levelOrder: LevelOrder.clamp(0),
50          })
51            .catch((err: BusinessError) => {
52              console.error("openCustomDialog error: " + err.code + " " + err.message)
53            })
54          this.dialogIndex++
55        })
56    }
57  }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
58}
59```
60
613.通过调用[UIContext](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md)中[getPromptAction](../reference/apis-arkui/arkts-apis-uicontext-uicontext.md#getpromptaction)方法获取[PromptAction](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md)对象，再通过该对象调用[openCustomDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialog12)接口，并且设置层级为100000的[levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11)参数来创建最高层级弹出框。
62
63```ts
64this.getUIContext().getPromptAction().openCustomDialog({
65  builder: () => {
66    this.topCustomDialog()
67  },
68  levelOrder: LevelOrder.clamp(100000)
69}).catch((err: BusinessError) => {
70  console.error("openCustomDialog error: " + err.code + " " + err.message)
71})
72```
73
74## 完整示例
75```ts
76import { LevelOrder } from '@kit.ArkUI';
77import { BusinessError } from '@kit.BasicServicesKit';
78
79@Entry
80@Component
81struct Index {
82  @StorageLink('dialogIndex') dialogIndex: number = 0
83
84  @Builder normalCustomDialog(index: number) {
85    Column() {
86      Text("我是普通弹窗" + index).fontSize(30)
87    }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
88  }
89
90  @Builder topCustomDialog() {
91    Column() {
92      Text("我是置顶弹窗").fontSize(30)
93      Row({ space: 50 }) {
94        Button('点我打开普通弹窗')
95          .onClick(() => {
96            this.getUIContext().getPromptAction().openCustomDialog({
97              builder: () => {
98                this.normalCustomDialog(this.dialogIndex)
99              },
100              levelOrder: LevelOrder.clamp(0),
101            })
102              .catch((err: BusinessError) => {
103                console.error("openCustomDialog error: " + err.code + " " + err.message)
104              })
105            this.dialogIndex++
106          })
107      }
108    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
109  }
110
111  build() {
112    Row() {
113      Column({ space: 5 }) {
114        Button('点击弹窗')
115          .fontSize(20)
116          .onClick(() => {
117            this.getUIContext().getPromptAction().openCustomDialog({
118              builder: () => {
119                this.topCustomDialog()
120              },
121              levelOrder: LevelOrder.clamp(100000)
122            }).catch((err: BusinessError) => {
123              console.error("openCustomDialog error: " + err.code + " " + err.message)
124            })
125          })
126      }.width('100%')
127    }
128  }
129}
130```
131![dialog-levelorder-demo1](figures/dialog-levelorder-demo1.gif)
132