一、警告弹窗
...
Button('点击我可以获取一个警告弹窗')
.onClick(() => {
AlertDialog.show({
title: '我是弹窗标题',
subtitle: '我是副标题',
message: '我是弹窗内容',
autoCancel: true, // 点击遮罩层是否关闭
alignment: DialogAlignment.Center, // 弹窗位置
offset: { dx: 0, dy: 0}, // 相对alignment所在位置的偏移量
gridCount: 4, // 弹窗宽度
buttonDirection: DialogButtonDirection.HORIZONTAL, // 控制按钮方向
// 只有一个确定按钮,用confirm
// confirm: {
// value: '确定',
// action: () => {
// console.log('点击确定')
// }
// },
// 有2个按钮
// primaryButton: {
// value: '取消',
// action: () => {
// console.log('点击取消按钮')
// }
// },
// secondaryButton: {
// enabled: true, // 控制按钮是否可点
// defaultFocus: true, // 是否默认焦点 开发工具上没有感觉到差别
// style: DialogButtonStyle.HIGHLIGHT, // DEFAULT->文字按钮 HIGHLIGHT->有背景按钮
// backgroundColor: Color.Black,
// value: '确定',
// action: () => {
// console.log('点击确定按钮')
// }
// },
// >2个按钮
buttons: [
{
value: '按钮1',
action: () => {
console.log('点击按钮1')
}
},
{
value: '按钮2',
action: () => {
console.log('点击按钮2')
}
},
{
value: '按钮3',
enabled: false, // 也能设置style, defaultFocus等
action: () => {
console.log('点击按钮3')
}
}
],
cancel: () => { // 点击遮罩层关闭 注意:如果设置onWillDismiss,点击遮罩层不会关闭,oncancel不会触发
console.log('点击遮罩层')
},
onWillDismiss: (res: DismissDialogAction) => {
// res.reason可以判断是哪种方式关闭的
console.log('我是onWillDismiss', JSON.stringify(res))
},
cornerRadius: 20, // 设置圆角
borderWidth: 1,
borderStyle: BorderStyle.Dashed,//使用borderStyle属性,需要和borderWidth属性一起使用
borderColor: Color.Blue,//使用borderColor属性,需要和borderWidth属性一起使用
shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
// showInSubWindow: true,
// isModal: true,
// transition: xxx //设置动画
})
})
二、列表选择弹窗
Button('点击我可以获取一个列表选择弹窗')
.onClick(() => {
ActionSheet.show({
title: '我是弹窗标题',
subtitle: '我是副标题',
message: '我是内容',
autoCancel: true,
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: 0 },
// 只能有一个按钮
confirm: {
value: '确定',
enabled: true,
style: DialogButtonStyle.HIGHLIGHT,
action: () => {
console.log('点击确定按钮')
}
},
cancel: () => {
console.log('点击遮罩层')
},
onWillDismiss: (res: DismissDialogAction) => {
console.log('我是onWillDismiss', JSON.stringify(res))
},
sheets: [{
title: '我是选项1',
icon: $r('app.media.wallet'),
action: () => {
console.log('点击选项1')
}
}, {
title: '我是选项2',
icon: $r('app.media.wallet'),
action: () => {
console.log('我是选项2')
}
}],
// .... 可以设置宽高,阴影,border等
})
})
总结:
1、这两种弹窗都没有找到设置标题内容居中的属性
2、警告弹窗按钮中间的线没有办法去掉
3、选择列表弹窗按钮只能一个