HarmonyOS 自定义弹窗 (CustomDialog) 跳转再返回后消失

我在Page A页面有个自定义弹窗 (CustomDialog) 然后这个时候点击弹框上的一个按钮 跳转到PageB ,然后再返回到pageA 这个时候发现弹框不见了

HarmonyOS
18h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

这是规格问题,做不到新页面覆盖在弹框上,因为弹框与页面不绑定,是在页面上的独立一层可以使用替代方案如下:

从弹窗跳转到其他页面,这时候看不到弹窗,点击返回,弹窗已经消失不显示。自定义弹窗的这种机制无法满足部分业务场景,很多需要跳转后返回page后dialog要求显示然后处理接下来的逻辑。 想要实现Dialog跳转页面之后 再返回Dialog不消失 ,可以使用Stack组件模拟实现Dialog的效果,页面跳转之后返回 可以做到 Dialog依然显示的效果。

核心代码如下所示:

import router from '@ohos.router';

@Entry
@Component
struct First {
  @State textValue: string = 'Hello World'
  // 显隐控制设置为不占用
  @State visible: Visibility = Visibility.None
  build() {
    // 使用stack可以实现假的dialog覆盖原页面上面
    Stack() {
      Row() {
        // 初始页面
        Column() {
          Text('Hello World').fontSize(50).fontWeight(FontWeight.Bold)
          // 触发dialog的地方
          Button('click').onClick(() => {
            //用于检测点击事件是否透传到原来的页面,我测了一下是没有透传的,符合dialog规范
            console.log("hit me!")
            if (this.visible == Visibility.Visible) {
              this.visible = Visibility.None
            } else {
              this.visible = Visibility.Visible
            }
          }).backgroundColor(0x777474).fontColor(0x000000)
        }.width('100%')
      }
      .height('100%')
      .backgroundColor(0x885555)
      Text('')
        .onClick(() => {
        if (this.visible == Visibility.Visible) {
          this.visible = Visibility.None
        } else {
          this.visible = Visibility.Visible
        }
      })
      .width('100%')
        .height('100%')
        .opacity(0.16)
        .backgroundColor(0x000000)
        .visibility(this.visible)
      Column() {
        GridRow({
          columns: { xs: 1, sm: 4, md: 8, lg: 12 },
          breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize },
        }) {
          GridCol({
            span: { xs: 1, sm: 2, md: 4, lg: 8 },
            offset: { xs: 0, sm: 1, md: 2, lg: 2 }
          }) {
            Column() {
              Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
              TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {
                this.textValue = value
              })
              Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
              Flex({ justifyContent: FlexAlign.SpaceAround }) {
                Button('cancel').onClick(() => {
                  if (this.visible == Visibility.Visible) {
                    this.visible = Visibility.None
                  } else {
                    this.visible = Visibility.Visible
                  }
                }).backgroundColor(0xffffff).fontColor(Color.Black)
                Button('jump').onClick(() => {
                  router.pushUrl({ url: 'pages/Index' })
                }).backgroundColor(0xffffff).fontColor(Color.Red)
              }.margin({ bottom: 10 })
            }.backgroundColor(0xffffff).visibility(this.visible).clip(true).borderRadius(20)
          }
        }
      }.width('95%')
    }

  }
}
分享
微博
QQ
微信
回复
16h前
相关问题
弹窗跳转到页面返回弹窗消失
1739浏览 • 1回复 待解决
HarmonyOS 自定义弹窗CustomDialog问题
635浏览 • 1回复 待解决
HarmonyOS 自定义弹窗CustomDialog 问题
31浏览 • 1回复 待解决
HarmonyOS 自定义弹窗 (CustomDialog)问题
428浏览 • 1回复 待解决
CustomDialog自定义动画
440浏览 • 1回复 待解决
HarmonyOS 自定义弹窗封装不显示
382浏览 • 1回复 待解决