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