HarmonyOS 自定义弹窗的问题

使用CustomDialogController 和 @CustomDialog 做了一个自定义隐私协议的弹窗，上免两个按钮，“同意”和“不同意”，当点击同意的时候执行了自定义的onAccept方法。具体代码如下：

onCancel() { 
} 
onAccept() { 
  router.pushUrl({ 
    url: 'pages/Index2' 
  }); 
} 
dialogController?: CustomDialogController = new CustomDialogController({ 
  builder: ProtocolDialog({ 
    noConfirm: this.onCancel, 
    confirm: this.onAccept, 
    controller:this.dialogController 
  }), 
  offset: {dx:0,dy:0}, 
  autoCancel:true, 
  customStyle:true, 
  isModal:true, 
  alignment: DialogAlignment.Center,  // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示 
})

现在的问题是点击同意的时候，跳转了一个路由(二级页面)，但是没有主动关闭弹窗，从二级页面回来之后，弹窗自己消失了。

HarmonyOS

zxjiu

2024-08-09 11:22:10

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

1.可以使用Stack堆叠效果来实现次效果

2.使用NavDestination的Dialog模式实现自定义弹窗，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-navigation-navigation-0000001774120150#ZH-CN_TOPIC_0000001811157830__设置子页面的类型

这里提供一个Stack的demo：

import router from '@ohos.router'; 
@Entry 
@Component 
struct Index { 
  // 显隐控制设置为不占用 
  @State visible: Visibility = Visibility.None 
  build() { 
    // 使用stack可以实现假的dialog覆盖原页面上面 
    Stack() { 
      Row() { 
        // 初始页面 
        Column() { 
          Button('按钮') 
            .onClick(() => { 
              //用于检测点击事件是否透传到原来的页面，我测了一下是没有透传的，符合dialog规范 
              console.log("hit me!") 
              if (this.visible == Visibility.Visible) { 
                this.visible = Visibility.None 
              } else { 
                this.visible = Visibility.Visible 
              } 
            }) 
            .backgroundColor(0x777474) 
            .fontColor(0x000000) 
        } 
        .height('100%') 
        .width('100%') 
        .justifyContent(FlexAlign.Start) 
        .alignItems(HorizontalAlign.Center) 
      } 
      .height('100%') 
      .backgroundColor('#FFF') 
      //这里开始是构造弹窗效果主要需要修改的地方，首先是加了一个半透明灰色的蒙层效果 
      Text('') 
        .onClick(() => { 
          if (this.visible == Visibility.Visible) { 
            this.visible = Visibility.None 
          } else { 
            this.visible = Visibility.Visible 
          } 
        }) 
        .width('100%') 
        .height('100%')// 透明度可以自己调节一下 
        .opacity(0.5) 
        .backgroundColor(Color.Black) 
        .visibility(this.visible) 
      Column() { 
        // 这里放的就是原Dialog里的column里的东西，稍微改改应该就可以用了 
        Column() { 
          Text('安全隐私').fontSize(20).margin({ top: 10, bottom: 10 }) 
          Text('是否跳转到隐私详情页面?').fontSize(16).margin({ bottom: 10 }) 
          Flex({ justifyContent: FlexAlign.SpaceAround }) { 
            Button('取消') 
              .onClick(() => { 
                if (this.visible == Visibility.Visible) { 
                  this.visible = Visibility.None 
                } else { 
                  this.visible = Visibility.Visible 
                } 
              }).backgroundColor(0xffffff).fontColor(Color.Black) 
            Button('确定') 
              .onClick(() => { 
                router.pushUrl({ 
                  url: 'pages/testTitle' 
                }) 
              }).backgroundColor(0xffffff).fontColor(Color.Red) 
          }.margin({ bottom: 10 }) 
        } 
        .backgroundColor(0xffffff) 
        .visibility(this.visible) 
        .clip(true) 
        .borderRadius(20) 
      }.width('95%') //设置弹窗宽度 
    } 
  } 
}

2024-08-09 19:19:53

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 自定义弹窗的问题

订阅鸿蒙技术特刊，精选内容抢先看