HarmonyOS Next快速入门：AlertDialog警告弹窗

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

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

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%')
  }
}