HarmonyOS 鸿蒙Next弹框如何排序啊?

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next弹框如何排序啊?

promptAction.openCustomDialog这个方法打开的弹框,假设有多个,如何调整他们的顺序啊,我试了下z序好像不行,有什么其他的好办法么


更多关于HarmonyOS 鸿蒙Next弹框如何排序啊?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-custome-dialog-development-practice-V5#section123081134286

从官方文档看, ArkUI自定义弹窗 (CustomDialog、promptAction)不支持层级管理,NavDestination Dialog 支持层级管理,可以看看这部分 能不能参考

@Entry
@Component
struct NavigationDiag {
  @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()

  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
    else if (name == 'DialogPage2') {
      DialogPage2()
    }
  }


  build() {
    Column(){
      Text('Hello')
      Navigation(this.pageStack) {
        Button('Push DialogPage')
          .margin(20)
          .width('80%')
          .onClick(() => {
            this.pageStack.pushPathByName('DialogPage', '');
          })
      }
      .mode(NavigationMode.Stack)
      .title('Main')
      .navDestination(this.PagesMap)
    }
  }
}

@Component
export struct DialogPage {
  @Consume('NavPathStack') pageStack: NavPathStack;


  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text("Dialog NavDestination")
            .fontSize(20)
            .margin({ bottom: 100 })

          Button("Two Diaglog").onClick(()=>{
            this.pageStack.pushPathByName("DialogPage2",'')
          })

          Button("Close").onClick(() => {
            this.pageStack.pop()
          }).width('30%')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .height('30%')
        .width('80%')
      }.height("100%").width('100%')
    }
    .zIndex(2)  //设置层级
    .backgroundColor('rgba(0,0,0,0.5)')
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
  }
}

@Component
export struct DialogPage2 {
  @Consume('NavPathStack') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text("Dialog2")
            .fontSize(20)
            .margin({ bottom: 100 })

          Button("Close").onClick(() => {
            this.pageStack.pop()
          }).width('30%')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .height('60%')
        .width('80%')

      }.height("100%").width('100%')
    }
    .zIndex(1) //设置层级
    .margin({top: 10 })
    .backgroundColor('rgba(0,0,0,0.5)')
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
  }
}

更多关于HarmonyOS 鸿蒙Next弹框如何排序啊?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


promptAction 目前是不支持弹窗层级设置
弹框都是后打开的在最上层,是有什么特殊需要吗

是的,产品逻辑要求有的弹框必须在最上面有的在最下面,但是这些弹框都是全局类型的,我希望能封装的时候就能控制这个弹框展示的层级,但是找不到这种方法

目前好像是不支持的,最好的方法可以自己stack去全局自行封装弹框

在HarmonyOS鸿蒙系统中,Next弹框(通常指的是对话框或弹窗组件)的排序并不是直接通过代码属性来设定的,而是依赖于它们被添加到界面(UI)的时间顺序或者通过特定的布局管理逻辑来实现。

如果你希望在多个弹框之间实现特定的显示顺序,可以通过以下几种方式:

  1. 控制添加顺序:确保按照你希望的显示顺序将弹框添加到UI树中。先添加的弹框通常会显示在底层,后添加的弹框会显示在上层。

  2. 使用布局管理:通过布局管理逻辑(如Stack布局)来控制弹框的显示层级。在Stack布局中,后添加的组件会默认覆盖前面的组件。

  3. 动态调整:在运行时根据条件动态地添加或移除弹框,从而控制它们的显示顺序。

  4. Z-index(伪代码示例):虽然鸿蒙没有直接的Z-index属性(这是Web开发中常见的概念),但你可以通过调整组件的添加顺序或使用布局特性来模拟这种效果。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部