HarmonyOS鸿蒙Next中在自定义弹窗中再打开一个弹窗问题？

HarmonyOS鸿蒙Next中在自定义弹窗中再打开一个弹窗问题？ 多层级弹窗展示不对？请问这种情况有什么解决办法？代码如下：

@Entry
@Component
struct TestPage {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample1(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Button('弹窗').width('80%').type(ButtonType.Normal).margin({ top: 20 }).onClick(() => {
        this.dialogController.open()
      })
    }.width('100%')
  }
}

@CustomDialog
struct CustomDialogExample1 {
  controller: CustomDialogController
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample2(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Text('第一层弹窗').fontSize(20).margin({ top: 10, bottom: 10 }).onClick(() => {
        this.dialogController.open()
      })
    }.width(300).height(300).backgroundColor('#777')
  }
}

@CustomDialog
struct CustomDialogExample2 {
  controller: CustomDialogController

  build() {
    Column() {
      Text('第二层弹窗').fontSize(20).margin({ top: 10, bottom: 10 })
    }.width(100).height(100).backgroundColor('#857')
  }
}

更多关于HarmonyOS鸿蒙Next中在自定义弹窗中再打开一个弹窗问题？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

自定义弹窗定义时类型加上null：

dialogController: CustomDialogController|null = new CustomDialogController({
    builder: CustomDialogExample1(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
})

调用时判空：

if(this.dialogController!= null) {
  this.dialogController.open()  // open or close
}

更多关于HarmonyOS鸿蒙Next中在自定义弹窗中再打开一个弹窗问题？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


太酷了！！，

基本信息

  • 项目名称: 太空探险
  • 项目状态: 进行中
  • 项目成员: 张三, 李四, 王五
  • 项目简介: 探索未知的太空领域，研究外星生命。

神奇！

@Entry
@Component
struct TestPage {
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample1(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Button('弹窗').width('80%').type(ButtonType.Normal).margin({ top: 20 }).onClick(() => {
        if (this.dialogController != null) {
          this.dialogController.open() // open or close
        }
      })
    }.width('100%')
  }
}

@CustomDialog
struct CustomDialogExample1 {
  controller: CustomDialogController
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample2(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Text('第一层弹窗').fontSize(20).margin({ top: 10, bottom: 10 }).onClick(() => {
        if (this.dialogController != null) {
          this.dialogController.open()
        }
      })
    }.width(300).height(300).backgroundColor('#777')
  }
}

@CustomDialog
struct CustomDialogExample2 {
  controller: CustomDialogController

  build() {
    Column() {
      Text('第二层弹窗').fontSize(20).margin({ top: 10, bottom: 10 })
    }.width(100).height(100).backgroundColor('#857')
  }
}

而且，多层级弹窗，如果在第一层弹窗中执行close操作，会崩溃，这怎么避免。

@Entry
@Component
struct TestPage {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample1(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Button('弹窗').width('80%').type(ButtonType.Normal).margin({ top: 20 }).onClick(() => {
        this.dialogController.open()
      })
    }.width('100%')
  }
}

@CustomDialog
struct CustomDialogExample1 {
  controller: CustomDialogController
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample2(),
    alignment: DialogAlignment.Center,
    autoCancel: false,
    customStyle: true,
  })

  build() {
    Column() {
      Text('第一层弹窗').fontSize(20).margin({ top: 10, bottom: 10 }).onClick(() => {
        this.controller.close()
      })
    }.width(300).height(300).backgroundColor('#777')
  }
}

@CustomDialog
struct CustomDialogExample2 {
  controller: CustomDialogController

  build() {
    Column() {
      Text('第二层弹窗').fontSize(20).margin({ top: 10, bottom: 10 })
    }.width(100).height(100).backgroundColor('#857')
  }
}

在HarmonyOS鸿蒙Next中，若要在自定义弹窗中再打开一个弹窗，可以通过@CustomDialog装饰器实现。首先，定义两个自定义弹窗组件，分别使用@CustomDialog装饰器。在第一个弹窗的按钮点击事件中，调用showDialog方法打开第二个弹窗。确保在showDialog方法中正确设置弹窗的属性和回调。示例代码如下：

@CustomDialog
struct FirstDialog {
  build() {
    Column() {
      Button('Open Second Dialog')
        .onClick(() => {
          showDialog({
            builder: SecondDialog
          });
        });
    }
  }
}

@CustomDialog
struct SecondDialog {
  build() {
    Column() {
      Text('This is the second dialog');
    }
  }
}

在入口页面中，通过showDialog方法打开第一个弹窗：

showDialog({
  builder: FirstDialog
});

这样，当第一个弹窗中的按钮被点击时，会触发第二个弹窗的显示。

在HarmonyOS鸿蒙Next中，若需在自定义弹窗中再打开另一个弹窗，建议采用以下步骤：

首先，确保当前弹窗的显示逻辑无误；

其次，使用showDialog方法触发第二个弹窗的显示。为避免布局冲突，建议在第一个弹窗的onShow回调中异步执行第二个弹窗的显示操作。

若需传递数据，可通过setDialogArgs方法。

注意管理弹窗的生命周期，避免内存泄漏。

回到顶部