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

news2024/9/20 0:49:42

一、警告弹窗

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