• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Dialog Box Layer Management
2In ArkUI, dialog boxes are directly mounted to the root node in ascending order of their levels. Under the root node, a dialog box on the right is displayed on top of a dialog box on the left. The newly created dialog box is inserted into the corresponding position based on its level. Dialog boxes with the same level are mounted in the order they were created.
3
4Since API version 18, you can set the [levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11) parameter to manage the display sequence of dialog boxes. This lets you control which dialog box appears on top of others.
5
6## Constraints
7
8Using **levelOrder** to manage the display sequence of dialog boxes is only supported for dialog boxes created using the following APIs: [openCustomDialog](arkts-uicontext-custom-dialog.md), [CustomDialog](arkts-common-components-custom-dialog.md), [AlertDialog](arkts-fixes-style-dialog.md#alert-dialog-box-alertdialog), [ActionSheet](arkts-fixes-style-dialog.md#action-sheet-actionsheet), and [showDialog](arkts-fixes-style-dialog.md#common-dialog-box-showdialog).
9
10> **NOTE**
11>
12> Dialog box layer management does not support subwindow scenarios. If **showInSubWindow** is set to **true**, the **levelOrder** parameter has no effect, and the display sequence of dialog boxes cannot be dynamically updated.
13
14## Creating Dialog Boxes at Different Levels
15
16> **NOTE**
17>
18> For details about the variables, see [Sample Code](#sample-code).
19
201. Initialize a dialog box content area with a **Text** component.
21
22```ts
23@Builder normalCustomDialog(index: number) {
24  Column() {
25    Text("I am normal dialog box " + index).fontSize(26)
26  }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
27}
28```
29
302. Initialize another dialog box content area with a button to open a common dialog box: In the click event, call the [getPromptAction](../reference/apis-arkui/js-apis-arkui-UIContext.md#getpromptaction) API in [UIContext](../reference/apis-arkui/js-apis-arkui-UIContext.md#uicontext) to obtain a [PromptAction](../reference/apis-arkui/js-apis-arkui-UIContext.md#promptaction) object. Then, use this object to call the [openCustomDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12) API and set the [levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11) parameter to **0** to create a normal-level dialog box.
31
32```ts
33@Builder topCustomDialog() {
34  Column() {
35    Text("I am a top-level dialog box").fontSize(26)
36    Row({ space: 50 }) {
37      Button('Open Normal Dialog Box')
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. Create a top-level dialog box: In the click event, call the [getPromptAction](../reference/apis-arkui/js-apis-arkui-UIContext.md#getpromptaction) API in [getPromptAction](../reference/apis-arkui/js-apis-arkui-UIContext.md#getpromptaction) to obtain a [PromptAction](../reference/apis-arkui/js-apis-arkui-UIContext.md#promptaction) object. Then, use this object to call the [openCustomDialog](../reference/apis-arkui/js-apis-arkui-UIContext.md#opencustomdialog12) API and set the [levelOrder](../reference/apis-arkui/js-apis-promptAction.md#basedialogoptions11) parameter to **100000** to create a top-level dialog box.
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## Sample Code
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("I am normal dialog box " + index).fontSize(26)
81    }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
82  }
83
84  @Builder topCustomDialog() {
85    Column() {
86      Text("I am a top-level dialog box").fontSize(26)
87      Row({ space: 50 }) {
88        Button('Open Normal Dialog Box')
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('Show Dialog Box')
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