HarmonyOS：自定义一个带分割线的Alert框

前言：系统的alert框太不美观了，需要自定义一个好看，并切带有分割线的alert按钮，自定义确认取消按钮颜色，以及按钮文字。现在快速自定义一个常用的alert框。

自定义alert的时候需要加关键字：@CustomDialog

//弹框标题，不自定义值默认显示提示

dialogTitle?:string;

//弹框内容

contentText?: string;

//自定义按钮内容，默认显示

confirmTitle?: string;

//自定义按钮内容，默认显示取消

cancelTitle?:string;
我这边只自定义了内容，你也可以自定义字体的颜色，再加一些你需要的参数。

import StyleConstants from '../../common/constants/StyleConstants';

@CustomDialog
export  struct CustomAlertDialog {
  controller?: CustomDialogController;
  dialogTitle?:string;
  contentText?: string;
  confirmTitle?: string;
  cancelTitle?:string;
  cancel: () => void = () => {
  }
  confirm: () => void = () => {
  }
  build() {
    Column() {
      Text(this.dialogTitle??ItemStyleConstants.DIALOG_TITLE)
        .fontSize(ItemStyleConstants.TITLE_FONT)
        .height(ItemStyleConstants.DIALOG_TITLE_H)
        .margin({top:ItemStyleConstants.MARGIN_SPACE*1.5})
      Text(this.contentText)
        .fontSize(ItemStyleConstants.BTN_FONT)
        .fontColor(ItemStyleConstants.CONTENT_COLOR)
        .margin({top:ItemStyleConstants.MARGIN_SPACE*1.5})
      Line()
        .backgroundColor(ItemStyleConstants.LINE_COLOR)
        .height(ItemStyleConstants.LINE_WH)
        .width(StyleConstants.FULL_PARENT)
        .margin({top:ItemStyleConstants.MARGIN_SPACE*2})
      Row(){
        Text(this.confirmTitle??ItemStyleConstants.CONFIRM_TITLE)
          .fontSize(ItemStyleConstants.BTN_FONT)
          .fontColor($r('app.color.main_nav_bg_color'))
          .onClick(() => {
            if (this.confirm) {
              this.confirm();
            }
          })
          .textAlign(TextAlign.Center)
          .width(ItemStyleConstants.HALF_PARENT)
        Line()
          .backgroundColor(ItemStyleConstants.LINE_COLOR)
          .height(StyleConstants.FULL_PARENT)
          .width(ItemStyleConstants.LINE_WH)
        Text(this.cancelTitle??ItemStyleConstants.CANCEL_TITLE)
          .fontSize(ItemStyleConstants.BTN_FONT)
          .fontColor($r('app.color.main_nav_bg_color'))
          .onClick(() => {
            if (this.cancel) {
              this.cancel();
            }
          })
          .width(ItemStyleConstants.HALF_PARENT)
          .textAlign(TextAlign.Center)
      }
      .width(StyleConstants.FULL_PARENT)
      .height(ItemStyleConstants.BOTTOM_H)
      .alignItems(VerticalAlign.Center)
    }
    .alignItems(HorizontalAlign.Center)
    .borderRadius(2)
  }
}
class ItemStyleConstants {
  static readonly  HALF_PARENT = '50%'

  static readonly DIALOG_TITLE_H = 30

  static readonly LINE_WH = 0.5

  static readonly BTN_FONT = 15

  static readonly TITLE_FONT = 20

  static readonly MARGIN_SPACE = 10.0

  static readonly BOTTOM_H = 44

  static readonly LINE_COLOR = '#8f8f8f'

  static readonly CONTENT_COLOR = '#6f6f6f'

  static readonly CONFIRM_TITLE = '确认'

  static readonly CANCEL_TITLE = '取消'

  static readonly DIALOG_TITLE = '提示'

}

这是代码，也就是UI设计，如何使用呢？

export default struct CustomAlertDialogExample {
dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomAlertDialog({
      contentText:this.changeRouteMessage,
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() }
    }),
    cancel: this.existApp,
    autoCancel: true,
    onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
      console.log("dialog onWillDismiss")
      if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
        dismissDialogAction.dismiss()
      }
      if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
        dismissDialogAction.dismiss()
      }
    },
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    customStyle: false,
    cornerRadius: 8,
    width: 300,
    height: 140,
    backgroundColor: Color.White,
  })
  onCancel() {
    console.info('Callback when the first button is clicked')
    this.dialogController?.close()
  }
  onAccept() {
    console.info('Callback when the second button is clicked')
    this.dialogController?.close()
}
build(){
    Image($r('app.media.ic_route_set'))
    .iconFancy()
    .id('itemHeadSet')
    .margin({ right: ItemStyleConstants.ITEM_PAD })
    .onClick(() => {
    //触发自定义alert的展开和现实
         if (this.dialogController != null) {
              this.dialogController.open()
            }
        })
    }
}

使用起来很简单，效果也很好看，如图所示：