HarmonyOS 自定义弹窗 \(CustomDialog\)能否设置最大高度？

Question

自定义弹窗 (CustomDialog)能否设置最大高度？不是一个定值的高度，根据内容自适应，但是最大高度是屏幕的60%，目前可以实现吗？

Answer 1

可以设置 CustomDialogController 的参数 customStyle 为 true，弹窗的大小由子组件决定，再通过设置 List 的约束高度 constraintSize来实现。参考代码如下：

@Entry
@Component
export struct DialogDemo {
  @State data: number[] = [];
  n: number = 0;

  build() {
    Column({ space: 12 }) {
      Text('数据:' + this.data.toString())
      Button('增加数据')
        .onClick(() => {
          this.data.push(this.n++)
        })
      Button('删除数据')
        .onClick(() => {
          this.data.pop()
        })
      Button('点击弹窗 最大高度60%')
        .onClick(() => {
          const carListDialogController: CustomDialogController = new CustomDialogController({
            builder: MyDialog({ data: this.data }),
            alignment: DialogAlignment.Bottom,
            customStyle: true,
          })
          carListDialogController.open()
        })
    }
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .height('100%')
    .width('100%')
  }
}

@Component
@CustomDialog
export struct MyDialog {
  data: number[] = []
  controller: CustomDialogController;

  build() {
    Column() {
      //标题
      Text('MyDialog')
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .padding(12)
        .borderWidth(2)
        .borderColor(Color.Yellow)
      //List - 每个number一个块
      List({ space: 12 }) {
        ForEach(this.data, (num: number, _: number) => {
          ListItem() {
            Text(num.toString())
          }.height(200)
          .width('100%')
          .borderWidth(5)
          .borderColor(Color.Blue)
        })
      } //List
      .edgeEffect(EdgeEffect.None)
      .scrollBar(BarState.Off)
      .constraintSize({
        maxHeight: '60%'
      })
    } //Column
    .backgroundColor(Color.White)
    .borderWidth(2)
    .borderColor(Color.Red)
  }
}