自定义Dialog跳转新页面返回后,Dialog状态丢失的问题

CustomDialog弹出后打开新页面再返回时,原来的CustomDialog消失不见了,是设计如此还是需要有别的设置?除了在打开新页面时记录弹窗状态,再onpageshow中恢复弹窗的显示(这样很不友好,因为一个页面可能有许多弹窗),还有别的方案吗?

HarmonyOS
2024-10-09 10:58:03
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

可以使用Stack容器结合其它组件,使用UI组件模拟Dialog的效果,并通过visibility控制弹窗的显示和消失,简单使用伪代码示例如下:

import router from '@ohos.router';  
@Entry  
@Component  
struct First {  
  // 显隐控制设置为不占用  
  @State visible: Visibility = Visibility.None  
  build() {  
    // 使用stack可以实现假的dialog覆盖原页面上面  
    Stack() {  
      Row() {  
        // 初始页面  
        Column() {  
          // 触发dialog的地方  
          Button('click').onClick(() => {  
            //用于检测点击事件是否透传到原来的页面,是符合dialog规范  
            console.log("hit me!")  
            if (this.visible == Visibility.Visible) {this.visible = Visibility.None}  
            else {this.visible = Visibility.Visible}  
          }).fontColor(0x000000)  
        }.width('100%')  
      }.height('100%')  
      Column() {  
        // 这个可以调节对话框效果,栅格布局,xs,sm,md,lg分别为四种规格  
        // 下面的breakpoints是用来区别当前属于哪个类型的断点。gridRow里的栅格数量为总数,gridCol里的就是偏移和假Dialog所占据的栅格数  
        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} })  
          {  
            // 这里放的就是原Dialog里的column里的东西,稍微改改应该就可以用了  
            Column() {  
              Text('Change text').fontSize(20).margin({ top: 10, 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/Page1' })}).backgroundColor(Color.Black).fontColor(Color.Red)  
              }.margin({ bottom: 10 })  
            }.backgroundColor(Color.Grey).visibility(this.visible).clip(true).borderRadius(20)  
          }  
        }  
      }.width('95%')//设置弹窗宽度  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-09 16:13:22
相关问题
dialog跳转新页面返回dialog关闭
281浏览 • 1回复 待解决
HarmonyOS 自定义Dialog显示问题
434浏览 • 1回复 待解决
HarmonyOS 自定义Dialog宽度
61浏览 • 1回复 待解决
HarmonyOS 自定义Dialog背景色透明问题
976浏览 • 1回复 待解决
HarmonyOS 自定义dialog open无效
261浏览 • 1回复 待解决
HarmonyOS 用CustomDialog自定义Dialog
272浏览 • 1回复 待解决
鸿蒙怎么实现自定义布局Dialog
9244浏览 • 2回复 已解决