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%')
}
}