全局UI方法-弹窗一警告弹窗（AlertDialog）

1、描述

        显示警告弹窗组件，可设置文本内容与响应回调。

2、属性

名称	参数类型	参数描述
show	AlertDialogParamWithConfirm | AlertDialogParamWithButtons	定义并显示AlertDialog组件。

2.1、AlertDialogParamWithConfirm对象说明：

参数名称	参数类型	必填	参数描述
title	ResourceStr	否	弹窗的标题。
message	ResourceStr	是	弹窗的内容。
autoCancel	boolean	否	点击遮障层（弹窗之外的空白区域）时，是否关闭弹窗。 默认值：true。
confirm	{ value:ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action:() => void }	否	确认按钮的文本内容，文本颜色，按钮背景色以及点击回调。
cancel	() => void	否	点击遮障层关闭Dialog时的回调。
alignment	DialogAlignment	否	弹窗在竖直方向上的对其方式。默认值：DialogAlignment.Default。
offset	Offset	否	弹窗相对于alignment所在位置的偏移量。
gridCount	number	否	弹窗容器宽度所占用栅格数。

2.2、AlertDialogParamWithButtons对象说明：

参数名称	参数类型	必填	参数描述
title	ResourceStr	否	弹窗的标题。
message	ResourceStr	是	弹窗的内容。
autoCancel	boolean	否	点击遮障层（弹窗之外的空白区域）时，是否关闭弹窗。 默认值：true。
primaryButton	{ value:ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action:() => void }	否	按钮的文本内容，文本颜色，按钮背景色以及点击回调。
secondaryButton	{ value:ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action:() => void }	否	按钮的文本内容，文本颜色，按钮背景色以及点击回调。
cancel	() => void	否	点击遮障层关闭Dialog时的回调。
alignment	DialogAlignment	否	弹窗在竖直方向上的对其方式。默认值：DialogAlignment.Default。
offset	Offset	否	弹窗相对于alignment所在位置的偏移量。
gridCount	number	否	弹窗容器宽度所占用栅格数。

2.3、DialogAlignment枚举说明

名称	描述
Top	垂直顶部对齐。
Center	垂直居中对齐。
Bottom	垂直底部对齐。
Default	默认对齐。
TopStart	左上对齐。
TopEnd	右上对齐。
CenterStart	左中对齐。
CenterEnd	右中对齐。
BottomStart	左下对齐。
BottomEnd	右下对齐。

2.4、Offset

相对布局完成位置坐标偏移量。

名称	类型	必填	说明
dx	Length	是	水平方向偏移量。
dy	Length	是	竖直方向偏移量。

3、属性对应解析

1.属性只使用message时

2.属性使用title和message时

3.autoCancel

        当不设置该属性时，它的默认值是true，即点击弹窗之外的空白区域时，弹窗关闭。

        当设置autoCancel为false时，点击弹窗之外的空白区域时，弹窗不消失。

4.show属性使用模式不同，UI显示效果也不同

AlertDialogParamWithConfirm：显示的按钮只有一个。

AlertDialogParamWithButtons：按钮最多可以设置两个。

5.alignment：设置弹窗弹出的位置

6.offset：相对布局完成位置坐标偏移量

7.gridCount:其实就是弹窗的宽度占比吧？

4、示例

@Entry
@Component
struct AlertDialogPage {
  @State message: string = '显示警告弹窗组件，可设置文本内容与响应回调。'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .width("96%")
          .margin({ top: 12 })

        Button("AlertDialogParamWithConfirm")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            AlertDialog.show({
              title: "我是AlertDialog的标题",
              message: "我是AlertDialog的描述内容",
              autoCancel: true,
              confirm: {
                value: "取消",
                fontColor: "#317aff",
                action: () => {
                  console.info("AlertDialog click confirm");
                }
              },
              cancel: () => {
                console.info("AlertDialog click cancel  autoCancel is true");
              },
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -20 },
              gridCount: 10
            })
          })

        Button("AlertDialogParamWithConfirm")
          .width("96%")
          .fontSize(20)
          .margin({ top: 12 })
          .onClick(() => {
            AlertDialog.show({
              title: "我是AlertDialog的标题",
              message: "我是AlertDialog的描述内容",
              autoCancel: false,
              primaryButton: {
                value: "取消",
                fontColor: "#317aff",
                // backgroundColor: Color.Blue,
                action: () => {
                  console.info("AlertDialog click primaryButton");
                }
              },
              secondaryButton: {
                value: "确认",
                fontColor: "#317aff",
                // backgroundColor: Color.Blue,
                action: () => {
                  console.info("AlertDialog click secondaryButton");
                }
              },
              cancel: () => {
                console.info("AlertDialog click cancel  autoCancel is true");
              },
              alignment: DialogAlignment.Bottom,
              offset: { dx: 0, dy: -20 },
              gridCount: 4

            })
          })


      }
      .width('100%')
      .height("100%")
    }
    .height('100%')
  }
}

5、效果图