QQ_1724137663647.png

CommonAlertDialog.ets

@Entry
@CustomDialog
export default struct  CommonAlertDialog{
  private controller:CustomDialogController;
  title:string|Resource|undefined = undefined;
  content:string|Resource|undefined = undefined;
  leftText:string|Resource|undefined = undefined;
  rightText:string|Resource|undefined = undefined;
  confirmText:string|Resource|undefined = undefined;
  onLeftClick?:()=>void;
  onRightClick?:()=>void;
  onConfirmClick?:()=>void;


  build(){
    Column(){
      if (this.title){
        Text(this.title)
          .fontSize($r('app.float.f_16'))
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .margin({bottom:$r('app.float.space_10')})
      }

      if (this.content){
        Text(this.content)
          .fontColor($r('app.color.c_666666'))
          .fontSize(this.title == undefined ? $r('app.float.f_16') : $r('app.float.f_14'))
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Start)
      }

      if (this.confirmText){
        Button(this.confirmText)
          .fontColor(Color.White)
          .fontSize($r('app.float.f_15'))
          .backgroundColor($r('app.color.app_theme_color'))
          .height($r('app.float.space_40'))
          .width('100%')
          .margin({top:$r('app.float.space_20')})
          .onClick(()=>{
            if (this.onConfirmClick) {
              this.onConfirmClick()
            }else {
              this.controller.close()
            }
          })
      }else {
        Row({space:20}){
          if (this.leftText) {
            Button(this.leftText)
              .fontColor($r('app.color.c_999999'))
              .fontSize($r('app.float.f_15'))
              .backgroundColor($r('app.color.c_f1f2f6'))
              .height($r('app.float.space_40'))
              .layoutWeight(1)
              .onClick(()=>{
                if (this.onLeftClick) {
                  this.onLeftClick()
                }else {
                  this.controller.close()
                }
              })
          }

          if (this.rightText) {
            Button(this.rightText)
              .fontColor(Color.White)
              .fontSize($r('app.float.f_15'))
              .backgroundColor($r('app.color.app_theme_color'))
              .height($r('app.float.space_40'))
              .layoutWeight(1)
              .onClick(()=>{
                if (this.onRightClick) {
                  this.onRightClick()
                }else {
                  this.controller.close()
                }
              })
          }
        }
        .margin({top:$r('app.float.space_20')})
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
    }
    .backgroundColor(Color.White)
    .padding($r('app.float.space_20'))
    .width(300)
    .borderRadius($r('app.float.space_20'))
  }
}

AlertDialogUtil.ets

import CommonAlertDialog from './CommonAlertDialog';
let alertDialog:CustomDialogController | undefined = undefined

@Component
struct AlertDialogUtil{
  build() {

  }

  showAlertDialog(title:string|Resource|undefined,content:string|Resource|undefined,
    leftText:string|Resource|undefined, rightText:string|Resource|undefined,
    onLeftClick?:()=>void, onRighttClick?:()=>void){
    this.hide()
    alertDialog = new CustomDialogController({
      builder: CommonAlertDialog({
        title:title,
        content:content,
        leftText:leftText,
        rightText:rightText,
        onLeftClick:onLeftClick,
        onRightClick:onRighttClick
      }),
      autoCancel: true, //是否允许点击遮障层退出
      alignment: DialogAlignment.Center, //弹窗在竖直方向上的对齐方式。
      offset: { dx: 0, dy: 0 },
      gridCount: 4, //弹窗宽度占栅格宽度的个数。
      customStyle: true, //弹窗容器样式是否自定义
      // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，
      // 那么此处需要将指向自己的controller放在所有controller的后面
    })
    alertDialog.open()
  }

  showConfirmDialog(title:string|Resource|undefined,content:string|Resource|undefined,
    confirmText:string|Resource|undefined,onConfirmClick?:()=>void){
    this.hide()
    alertDialog = new CustomDialogController({
      builder:CommonAlertDialog({
        title:title,
        content:content,
        confirmText:confirmText,
        onConfirmClick:onConfirmClick
      }),
      autoCancel:true,
      alignment: DialogAlignment.Center, //弹窗在竖直方向上的对齐方式。
      customStyle:true
    })
    alertDialog.open()
  }


  hide(){
    if (alertDialog) {
      alertDialog.close()
      alertDialog = undefined
    }
  }
}

export  const  alertDialogUtil = new AlertDialogUtil()

使用：

import {alertDialogUtil} from '../../view/common/AlertDialogUtil'


 alertDialogUtil.showAlertDialog('标题','提示内容','左按钮','右按钮',()=>{
      
    },()=>{
      
    })

 alertDialogUtil.showConfirmDialog('提示',htmlMsg,'确定',()=>{
      
    })

97a5d374d72ab6f5714338e642005b9e.png

a281e894e82f6f954f6ab3e78fcf20c7.png