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、效果图
