如何控制CustomDialog显示层级

A页面弹窗一个CustomDialog，若Dialog未关闭时从A页面跳转到B页面，此时会发现在A页面弹出的Dialog会出现在B页面的层级上方，有什么方式可以让B页面盖住Dialog？

HarmonyOS

友人FA

2024-07-23 11:08:42

浏览

回答 1

待解决

回答 1

按赞同

按时间

退休的程序员

router跳转：

import router from '@ohos.router'; 
 
@CustomDialog 
export default struct UserPrivacyDialog { 
  controller: CustomDialogController = new CustomDialogController({ builder: '' }); 
  cancel: Function = () => { 
  }; 
  confirm: Function = () => { 
  }; 
  visible: Visibility = Visibility.None 
 
  build() { 
    Column() { 
      Button('jump') 
        .onClick(() => { 
          router.pushUrl({ 
            url: 'pages/PageTwo' 
          }) 
        }).backgroundColor(0xffffff).fontColor(Color.Red) 
    } 
    .margin({ top: 22 }) 
    .justifyContent(FlexAlign.SpaceEvenly) 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @State textValue: string = 'Hello World' 
  @State visible: Visibility = Visibility.None 
 
  build() { 
    Stack() { 
      Row() { 
        Column() { 
          Button('click') 
            .onClick(() => { 
              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() { 
              Flex({ justifyContent: FlexAlign.SpaceAround }) { 
                UserPrivacyDialog(); 
              }.margin({ bottom: 10 }) 
            } 
            .backgroundColor(0xffffff) 
            .visibility(this.visible) 
            .clip(true) 
            .borderRadius(20) 
          } 
        } 
      }.width('95%') //设置弹窗宽度 
    } 
  } 
}

navigation方式跳转：

import promptAction from '@ohos.promptAction'; 
 
@Component 
export struct Test1 { 
  @State message: string = 'Hello World'; 
 
  build() { 
    NavDestination() { 
      Row() { 
        Column() { 
          Text(this.message) 
            .fontSize(50) 
            .fontWeight(FontWeight.Bold) 
        } 
        .width('100%') 
      } 
      .height('100%') 
    }.onBackPressed(() => { 
      promptAction.showToast({ message: '123' }) 
      return false 
    }) 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack() 
  @State textValue: string = '输入' 
  // 显隐控制设置为不占用 
  @State visible: Visibility = Visibility.None 
 
  @Builder 
  PageMap(name: string) { 
    if (name === 'pageOne') { 
      Test1() 
    } 
  } 
 
  build() { 
    Navigation(this.pageInfos) { 
      Column() { 
        Stack() { 
          Row() { 
            Column() { 
              Text('我是第一个页面') 
                .fontSize(30) 
                .fontWeight(FontWeight.Bold) 
              Button('按钮') 
                .onClick(() => { 
                  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() { 
            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('安全隐私').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(() => { 
                        this.pageInfos.pushPath({ name: 'pageOne' }) 
                      }).backgroundColor(0xffffff).fontColor(Color.Red) 
                  }.margin({ bottom: 10 }) 
                } 
                .backgroundColor(0xffffff) 
                .visibility(this.visible) 
                .clip(true) 
                .borderRadius(20) 
              } 
            } 
          }.width('100%') //设置弹窗宽度 
        } 
      }.width('100%').margin({ top: 5 }) 
    }.navDestination(this.PageMap) 
  } 
}

2024-07-23 18:33:46

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

发布

51CTO

51CTO博客

51CTO学堂

如何控制CustomDialog显示层级

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