HarmonyOS NEXT - AlertDialog警告弹窗

举报
鸿蒙开发工程师 发表于 2025/03/31 20:21:09 2025/03/31
66 0 0
【摘要】 显示警告弹窗组件,可设置文本内容与响应回调。AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)AlertDialogParam对象说明title:弹窗标题。subtitle:弹窗副标题。message:弹窗内容。auto...

显示警告弹窗组件,可设置文本内容与响应回调。

AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)

AlertDialogParam对象说明

  • title:弹窗标题。
  • subtitle:弹窗副标题。
  • message:弹窗内容。
  • autoCancel:点击遮障层时,是否关闭弹窗,true表示关闭弹窗。false表示不关闭弹窗。(默认值:true)
  • cancel:点击遮障层关闭dialog时的回调。
  • alignment:弹窗在竖直方向上的对齐方式。(默认值:DialogAlignment.Default)
  • offset:弹窗相对alignment所在位置的偏移量。(默认值:{ dx: 0 , dy: 0 })
  • gridCount:弹窗容器宽度所占用栅格数。(默认值:4,取值范围:大于等于0的整数。)
  • maskRect:弹窗遮蔽层区域,在遮蔽层区域内的事件不透传,在遮蔽层区域外的事件透传。(默认值:{ x: 0, y: 0, width: ‘100%’, height: ‘100%’ })
  • showInSubWindow:某弹框需要显示在主窗口之外时,是否在子窗口显示此弹窗。(默认值:false,弹窗显示在应用内,而非独立子窗口。)
  • isModal:弹窗是否为模态窗口,模态窗口有蒙层,非模态窗口无蒙层。(默认值:true,此时弹窗有蒙层。)
  • backgroundColor:弹窗背板颜色。(默认值:Color.Transparent)
  • backgroundBlurStyle:弹窗背板模糊材质。(默认值:BlurStyle.COMPONENT_ULTRA_THICK)
  • onWillDismiss:交互式关闭回调函数。
  • cornerRadius:设置背板的圆角半径。可分别设置4个圆角的半径。(默认值:{ topLeft: ‘32vp’, topRight: ‘32vp’, bottomLeft: ‘32vp’, bottomRight: ‘32vp’ })圆角大小受组件尺寸限制,最大值为组件宽或高的一半,若值为负,则按照默认值处理。百分比参数方式:以父元素弹窗宽和高的百分比来设置弹窗的圆角。
  • transition:设置弹窗显示和退出的过渡效果。
  • width:设置弹窗背板的宽度。
  • height:设置弹窗背板的高度。
  • borderWidth:可分别设置4个边框宽度。(默认值:0)百分比参数方式:以父元素弹窗宽的百分比来设置弹窗的边框宽度。当弹窗左边框和右边框大于弹窗宽度,弹窗上边框和下边框大于弹窗高度,显示可能不符合预期。
  • borderColor:设置弹窗背板的边框颜色。(默认值:Color.Black)如果使用borderColor属性,需要和borderWidth属性一起使用。

实例演示:AlertDialogPage

@Entry
@Component
struct AlertDialogPage {
  @State message: string = '第1节 AlertDialog警告弹窗';
  @State dialogMessage:string=''

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('点击弹窗').onClick(()=>{
        AlertDialog.show({
          title:'删除联系人',
          message:'是否删除所选的联系人',
          primaryButton:{
            value:'取消',
            action:()=>{
              //点击“取消”按钮的业务逻辑
              this.dialogMessage='点击了取消'
            }
          },
          secondaryButton:{
            value:'删除',
            fontColor:Color.Red,
            action:()=>{
              //点击“删除”按钮的业务逻辑
              this.dialogMessage='成功删除'
            }
          }
        })
      })

      Text('弹窗消息:'+this.dialogMessage)
    }
    .height('100%')
    .width('100%')
  }
}
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。