自学鸿蒙HarmonyOS的ArkTS语言＜六＞警告弹窗AlertDialog和列表选择弹窗ActionSheet

一、警告弹窗

...
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等})})