10.2：AlertDialog

ArkUI开发框架提供了AlertDialog组件来显示警告弹窗，本节笔者简单介绍下该组件的使用。

10.2.1：语法介绍

declare class AlertDialog {
    static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions);
}

declare interface AlertDialogParam {
    title?: ResourceStr;
    subtitle?: ResourceStr;
    message: ResourceStr;
    autoCancel?: boolean;
    cancel?: () => void;
    alignment?: DialogAlignment;
    offset?: Offset;
    gridCount?: number; 
    maskRect?: Rectangle;
    showInSubWindow?: boolean;
    isModal?: boolean;
    backgroundColor?: ResourceColor;
    backgroundBlurStyle?: BlurStyle;
    onWillDismiss?: Callback<DismissDialogAction>;
    transition?: TransitionEffect;
    cornerRadius?: Dimension | BorderRadiuses | LocalizedBorderRadiuses;
    width?: Dimension;
    height?: Dimension;
    borderWidth?: Dimension | EdgeWidths | LocalizedEdgeWidths;
    borderColor?: ResourceColor | EdgeColors | LocalizedEdgeColors;
    borderStyle?: BorderStyle | EdgeStyles;
    shadow?: ShadowOptions | ShadowStyle;
    textStyle?: TextStyle;
}

declare interface AlertDialogParamWithConfirm extends AlertDialogParam {
    confirm?: {
        enabled?: boolean;
        defaultFocus?: boolean;
        style?: DialogButtonStyle;
        value: ResourceStr;
        fontColor?: ResourceColor;        
        backgroundColor?: ResourceColor;
        action: () => void;
    };
}

declare interface AlertDialogParamWithButtons extends AlertDialogParam {
    primaryButton: {
        enabled?: boolean;
        defaultFocus?: boolean;
        style?: DialogButtonStyle;
        value: ResourceStr;
        fontColor?: ResourceColor;
        backgroundColor?: ResourceColor;
        action: () => void;
    };
    secondaryButton: {
        enabled?: boolean;
        defaultFocus?: boolean;
        style?: DialogButtonStyle;
        value: ResourceStr;
        fontColor?: ResourceColor;
        backgroundColor?: ResourceColor;
        action: () => void;
    };
}

declare interface AlertDialogParamWithOptions extends AlertDialogParam {
    buttons: Array<AlertDialogButtonOptions>;
    buttonDirection?: DialogButtonDirection;
}

declare interface AlertDialogButtonOptions {
    enabled?: boolean;
    defaultFocus?: boolean;
    style?: DialogButtonStyle;
    value: ResourceStr;
    fontColor?: ResourceColor;
    backgroundColor?: ResourceColor;
    action: () => void;
    primary?: boolean;
}

AlertDialog提供了一个静态方法show来显示一个警告对话框，它可以接收三种配置参数并继承自AlertDialogParam，各参数说明如下：

• AlertDialogParamWithConfirm

• AlertDialogParamWithButtons

• AlertDialogParamWithOptions

import { promptAction } from '@kit.ArkUI';

@Entry
@ComponentV2
struct Index {

  build() {
    Column({space: 10}) {
      Button("AlertDialogParamWithConfirm")
        .onClick(() => {
          this.alertDialogParamWithConfirm()
        })
      Button("AlertDialogParamWithButtons")
        .onClick(() => {
          this.alertDialogParamWithButtons()
        })
      Button("AlertDialogParamWithOptions")
        .onClick(() => {
          this.alertDialogParamWithOptions()
        })
    }
    .width('100%')
  }

  private alertDialogParamWithConfirm() {
    let dialog: AlertDialogParamWithConfirm = {
      message: "弹窗内容",
      title: "弹窗标题",
      subtitle: "弹窗副标题",
      autoCancel: false,
      cancel: () => {
        promptAction.showToast({ message: "点击返回键" })
      },
      width: 260,
      backgroundColor: "#aabbcc",
      cornerRadius: 10,
      borderWidth: 2,
      borderColor: Color.Red,
      borderStyle: BorderStyle.Solid,
      backgroundBlurStyle: BlurStyle.Thin,
      confirm: {
        enabled: true,
        value: "按钮文字",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了按钮" })
        }
      }
    }
    AlertDialog.show(dialog)
  }
  private alertDialogParamWithButtons() {
    let dialog: AlertDialogParamWithButtons = {
      message: "弹窗内容",
      title: "弹窗标题",
      subtitle: "弹窗副标题",
      autoCancel: false,
      cancel: () => {
        promptAction.showToast({ message: "点击返回键" })
      },
      backgroundColor: "#aabbcc",
      cornerRadius: 10,
      borderWidth: 2,
      borderColor: Color.Red,
      borderStyle: BorderStyle.Solid,
      backgroundBlurStyle: BlurStyle.Thin,
      primaryButton: {
        enabled: true,
        value: "第一个按钮",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了第一个按钮" })
        }
      },
      secondaryButton: {
        enabled: true,
        value: "第二个按钮",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了第二个按钮" })
        }
      }
    }
    AlertDialog.show(dialog)
  }

  private alertDialogParamWithOptions() {
    let buttons: Array<AlertDialogButtonOptions> = [
      {
        enabled: true,
        value: "第一个按钮",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了第一个按钮" })
        }
      },
      {
        enabled: true,
        value: "第二个按钮",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了第二个按钮" })
        }
      },
      {
        enabled: true,
        value: "第三个按钮",
        backgroundColor: "#abcabc",
        fontColor: Color.Red,
        defaultFocus: true,
        action: () => {
          promptAction.showToast({ message: "点击了第三个按钮" })
        }
      }
    ]
    let dialog: AlertDialogParamWithOptions = {
      buttons: buttons,
      message: "弹窗内容",
      title: "弹窗标题",
      subtitle: "弹窗副标题",
      autoCancel: false,
      cancel: () => {
        promptAction.showToast({ message: "点击返回键" })
      },
      backgroundColor: "#aabbcc",
      cornerRadius: 10,
      borderWidth: 2,
      borderColor: Color.Red,
      borderStyle: BorderStyle.Solid,
      backgroundBlurStyle: BlurStyle.Thin,
      isModal: false
    }
    AlertDialog.show(dialog)
  }
}