HarmonyOS CustomDialogController如何弹出半屏弹窗？

Question

CustomDialogController如何弹出半屏弹窗使得弹窗内容未覆盖的区域仍然可以响应用户操作。

Answer 1

1.可以设置 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br\>2.可以将弹窗组件的蒙层属性isModal设为false，自定义蒙层并通过Visibility控制显隐，使用hitTestBehavior(HitTestMode.None)可以实现自身不响应触摸测试。样例demo

@CustomDialog
struct MyDialog {
  // 显隐控制设置为不占用
  @Link visible: Visibility
  controller1: CustomDialogController
  build() {
    Row() {
      Column({ space: 10 }) {
        Text('自定义弹窗').fontSize(25).fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
          Button('确认').onClick(() => {
            this.controller1.close()
            this.visible=Visibility.None
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        }.width("100%")
      }.width("100%")
    }.height(100)
  }
}
@Entry
@Component
struct Index {
  @State visible: Visibility = Visibility.None
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog({
      visible: this.visible
    }), offset: {dx: 0, dy: 0},
    // 是否允许点击遮障层退出
    autoCancel: false,
    //设置窗口无蒙层
    isModal:false,
  })
  build() {
    Column({ space: 10 }) {
      Button('打开弹窗').onClick(() => {
        this.dialogController1.open()
        this.visible=Visibility.Visible
      })
      List(){
        ForEach(this.arr,(item:number)=>{
          ListItem(){Row(){Text('文本')}.justifyContent(FlexAlign.Center).width('100%').backgroundColor(0xFFFFFF).height(100)}
        })
      }.divider({strokeWidth:2,color:'#F1F3F5'}).height('90%')
      Column().width('100%').height('100%').position({x:0, y:0}).zIndex(10).backgroundColor(0x33000000).visibility(this.visible).hitTestBehavior(HitTestMode.None)
    }.width("100%")
  }
}