自定义弹框如何宽度全屏，高度自定义？

Question

如题：自定义弹框如何宽度全屏，高度自定义？

Answer 1

请参考此demo // 自定义弹窗组件1

import router from '@ohos.router'

@CustomDialog
export struct MyDialog1 {
  controller1: CustomDialogController
  title: string = ''

  build() {
    Row() {
      Column({ space: 10 }) {
        Text(this.title).fontSize(25)
          .fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('取消')
            .onClick(() => {
              this.controller1.close()
            })
            .backgroundColor(0xffffff)
            .fontColor(Color.Black)
          Button('确认')
            .onClick(() => {
              // this.controller1.close()

            })
            .backgroundColor(0xffffff)
            .fontColor(Color.Black)
        }
        .width('100%')
      }
      .width('100%')
      .backgroundColor(Color.White).height(300)
    }
  }
}

// main页面
@Entry
@Component
struct Index {
  @State dialogData: string = ''
  @State colorTest: Color = Color.Blue
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog1({
      title: '弹窗1',
    }),
    // 弹窗容器样式是否自定义
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top
    // 是否允许点击遮障层退出
    // autoCancel: false,
    // 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传
    // maskRect: ({x:0,y:567,width:'100%’,height:220}),
    // 自定义蒙层颜色
    // maskColor: (Color.Yellow)
  })

  confirm(data: string) {
    this.dialogData = data
    console.info(recvdialogdata:${data}) // 获取弹窗输入的信息
  }

  // 在自定义组件即将析构销毁时将dialogController置空
  aboutToDisappear() {
    // 将dialogController置空
    // this.dialogController1 = null
  }

  build() {
    Row() {
      Column({ space: 10 }) {
        Text('这是一个弹窗的测试')
          .fontSize(25).margin(20).fontColor(0x3399FF)
        Button('点击打开弹窗')
          .onClick(() => {
            this.dialogController1.open()
          })
      }.width('100%')
    }.height('100%').backgroundColor(Color.White)
  }
}