鸿蒙Next开发定义全局公用弹框

鸿蒙Next开发定义全局公用弹框

定义全局公用弹框还是很有必要的，一般取消，确定用的都是同一个样式的弹框，这样app看起来统一，也好管理。

效果图如下

是否要取消按钮，确定按钮都是可以通过传参来控制的。

部分参考代码

/**
 *通用Dialog弹窗组件
 */
@CustomDialog
export struct CommonDialog {
  //自定义加载的内容
  @BuilderParam contentBuilder?: () => void
  //标题
  title: ResourceStr = $r('app.string.tip')
  //描述
  description:  ResourceStr = ''
  //确认按钮文案
  private positiveText:ResourceStr = $r('app.string.sure')
  //取消按钮文案
  private negativeText:ResourceStr = $r('app.string.cancel')
  //确认按钮回调
  positiveCallback?: () => void
  //取消按钮回调
   negativeCallback?: () => void
  //展示确认按钮
  private showPositive = true
  //展示取消按钮
  private showNegative = true
  //弹窗控制器
  controller: CustomDialogController

  aboutToAppear() {

  }

  build() {
    Stack() {
      Column() {
        Text(this.title)
          .fontSize($r('app.float.size_text_16'))
          .fontColor($r('app.color.color_black'))
          .fontWeight(FontWeight.Bold)
          .maxLines(1)
          .height($r('app.float.size_text_50'))
          .textAlign(TextAlign.Center)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Divider().color($r('app.color.color_f5f5f5'))
        Text(this.description)
          .fontSize($r('app.float.size_text_15'))
          .fontColor($r('app.color.color_555'))
          .textAlign(TextAlign.Center)
          .padding($r('app.float.size_text_20'))
        Divider().color($r('app.color.color_f5f5f5')).padding(0)
        Row() {
          Text(this.negativeText)
            .flexShrink(1)
            .textAlign(TextAlign.Center)
            .layoutWeight(1)
            .visibility(this.showNegative ? Visibility.Visible : Visibility.None)
            .onClick(() => {
              this.negativeCallback?.()
              this.controller.close()
            })

有需要完整代码的可私信