一、簡介

ArkUI的彈出框節點都是直接掛載在根節點上，會根據層級從小到大依次掛載。根節點下，右邊的彈出框節點會覆蓋顯示在左邊的彈出框節點上，新創建的彈出框節點會根據層級大小插入到對應的位置，同一層級大小的彈窗節點按照創建的先後順序進行掛載。
從API version 18開始，可以通過設置levelOrder參數來管理彈出框的顯示順序，確保層級較高的彈出框覆蓋在層級較低的彈出框之上，從而根據需要靈活控制各層彈出框的顯示效果。

二、使用約束

目前openCustomDialog、CustomDialog、AlertDialog、ActionSheet、showDialog支持通過levelOrder參數來管理彈出框的層次。

説明 彈出框層級管理不支持子窗場景，即當showInSubWindow設置為true時，levelOrder參數設置無效。不支持動態刷新彈出框的顯示順序。

三、創建不同層級的彈出框

説明 詳細變量定義請參考下面完整示例。

  1. 初始化一個彈出框內容區，內部包含一個Text組件。
@Builder normalCustomDialog(index: number) {
  Column() {
    Text("我是普通彈窗" + index).fontSize(30)
  }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
}
  1. 初始化另一個彈出框內容區，內部包含一個點擊打開普通彈出框的按鈕，點擊事件中通過調用UIContext中getPromptAction方法獲取PromptAction對象，再通過該對象調用openCustomDialog接口，並且設置層級為0的levelOrder參數來創建普通層級彈出框。
@Builder topCustomDialog() {
  Column() {
    Text("我是置頂彈窗").fontSize(30)
    Row({ space: 50 }) {
      Button('點我打開普通彈窗')
        .onClick(() => {
          this.getUIContext().getPromptAction().openCustomDialog({
            builder: () => {
              this.normalCustomDialog(this.dialogIndex)
            },
            levelOrder: LevelOrder.clamp(0),
          })
            .catch((err: BusinessError) => {
              console.error("openCustomDialog error: " + err.code + " " + err.message)
            })
          this.dialogIndex++
        })
    }
  }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
}
  1. 通過調用UIContext中getPromptAction方法獲取PromptAction對象，再通過該對象調用openCustomDialog接口，並且設置層級為100000的levelOrder參數來創建最高層級彈出框。
this.getUIContext().getPromptAction().openCustomDialog({
  builder: () => {
    this.topCustomDialog()
  },
  levelOrder: LevelOrder.clamp(100000)
}).catch((err: BusinessError) => {
  console.error("openCustomDialog error: " + err.code + " " + err.message)
})
效果圖

HarmonyOS：彈出框層級管理_鴻蒙

示例完整代碼

import { LevelOrder } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct TestOpenCustomDialog4 {
  @StorageLink('dialogIndex') dialogIndex: number = 0

  @Builder normalCustomDialog(index: number) {
    Column() {
      Text("我是普通彈窗" + index).fontSize(30)
    }.height(400).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  @Builder topCustomDialog() {
    Column() {
      Text("我是置頂彈窗").fontSize(30)
      Row({ space: 50 }) {
        Button('點我打開普通彈窗')
          .onClick(() => {
            this.getUIContext().getPromptAction().openCustomDialog({
              builder: () => {
                this.normalCustomDialog(this.dialogIndex)
              },
              levelOrder: LevelOrder.clamp(0),
            })
              .catch((err: BusinessError) => {
                console.error("openCustomDialog error: " + err.code + " " + err.message)
              })
            this.dialogIndex++
          })
      }
    }.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
  }

  build() {
    Column() {
      Button('點擊彈窗')
        .fontSize(20)
        .onClick(() => {
          this.getUIContext().getPromptAction().openCustomDialog({
            builder: () => {
              this.topCustomDialog()
            },
            levelOrder: LevelOrder.clamp(100000)
          }).catch((err: BusinessError) => {
            console.error("openCustomDialog error: " + err.code + " " + err.message)
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}