自学鸿蒙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等
     })
   })

在这里插入图片描述
总结:
1、这两种弹窗都没有找到设置标题内容居中的属性
2、警告弹窗按钮中间的线没有办法去掉
3、选择列表弹窗按钮只能一个

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Misha韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值