HarmonyOS鸿蒙Next中底部弹出的弹窗用哪个组件好

推荐使用半模态转场，参考文档，文档里有示例

文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5

或者可以通过自定义弹框实现：

let anmDuration: number = 300;

// 弹窗交互

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController = new CustomDialogController({

    builder: CustomDialogExample({}),
    autoCancel: false

  })
  @State showFlag: Visibility = Visibility.Visible;
  @State isAutoCancel: boolean = false;
  textController: TextAreaController = new TextAreaController()

  build() {

    Column() {

      Row() {

        Text("自定义动画的弹窗")

      }

      .borderRadius(20)

      .backgroundColor('#ff6288cb')

      .height(200)

      .width('100%')

    }
    .margin({ top: 10 })

    .justifyContent(FlexAlign.Center)

    .width('100%')

    .height("100%")

    .onClick(() => {

      console.log("dialogClick")

      if (this.isAutoCancel) {

        console.log("dialogClick2")

        this.cancel();

      }

    })

    .visibility(this.showFlag)

    // 定义进场出场转场动画效果

    .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration })

      .combine(TransitionEffect.translate({ y: 500 })))

  }

  // 延迟关闭弹窗，让自定义的出场动画显示

  cancel() {

    this.showFlag = Visibility.Hidden

    console.log("closeDialog")

    setTimeout(() => {

      this.controller.close()

    }, anmDuration)

  }
}

@Entry
@Component
struct CustomDialogUser {
  @State isAutoCancel: boolean = true;
  dialogController: CustomDialogController = new CustomDialogController({

    builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }),

    autoCancel: this.isAutoCancel,

    customStyle: true,

  })

  build() {

    Column() {

      Button('click me')

        .onClick(() => {

          this.dialogController.open()

        })

    }.width('100%')

    .height('100%')

  }
}