HarmonyOS NEXT鸿蒙开发入门，警告弹窗 (AlertDialog)

最新推荐文章于 2024-08-14 11:21:18 发布

浩宇软件开发

最新推荐文章于 2024-08-14 11:21:18 发布

阅读量1.1k

点赞数 28

分类专栏： HarmonyOS NEXT鸿蒙开发入门文章标签： harmonyos 华为 HarmonyOS NEXT 鸿蒙开发

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/141066946

版权

HarmonyOS NEXT鸿蒙开发入门专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

1. 官方文档指南

警告弹窗 (AlertDialog) https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-alert-dialog-box-V5#alertdialogshow

2. 描述

定义警告弹窗并弹出。

3. 使用说明

AlertDialog.show

static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)
static 修饰的方法，直接通过类名.方法的形式调用

参数：

参数名	类型	必填	描述
value	AlertDialogParamWithConfirm `或` AlertDialogParamWithButtons `或` AlertDialogParamWithOptions	是	定义并显示AlertDialog组件

AlertDialogParam对象说明

参数名	类型	必填	描述
title	ResourceStr	否	弹窗标题
subtitle	ResourceStr	否	弹窗副标题
message	ResourceStr	是	弹窗内容
autoCancel	boolean	否	点击遮障层时，是否关闭弹窗， true表示关闭弹窗。false表示不关闭弹窗。默认值：true
cancel	() => void	否	点击遮障层关闭dialog时的回调
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式（Top Center Bottom）等

这里我只列举了常用的属性,更多使用方法请查看官方API文档

AlertDialogParamWithConfirm对象说明
继承自AlertDialogParam

参数名	类型	必填	描述
confirm	{enabled10+?: boolean, defaultFocus10+?: boolean, style10+?: DialogButtonStyle, value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void}	否	确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调

AlertDialogParamWithButtons对象说明
继承自AlertDialogParam

参数名	类型	必填	描述
primaryButton	{enabled10+?: boolean, defaultFocus10+?: boolean, style10+?: DialogButtonStyle, value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void;}	否	确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。在弹窗获焦且未进行tab键走焦时，该按钮默认响应Enter键，且多重弹窗可自动获焦连续响应。默认响应Enter键能力在defaultFocus为true时不生效。 enabled：点击Button是否响应。默认值：true defaultFocus：设置Button是否是默认焦点。默认值：false style：设置Button的风格样式。默认值：DialogButtonStyle.DEFAULT。 value：Button文本内容。 fontColor：Button文本颜色。 backgroundColor：Button背景颜色。 action： Button选中时的回调。
secondaryButton	{enabled10+?: boolean, defaultFocus10+?: boolean, style10+?: DialogButtonStyle, value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void;}	否	确认Button的使能状态、默认焦点、按钮风格、文本内容、文本色、按钮背景色和点击回调。 enabled：点击Button是否响应。默认值：true。 defaultFocus：设置Button是否是默认焦点。默认值：false。 style：设置Button的风格样式。默认值：DialogButtonStyle.DEFAULT。 value：Button文本内容。 fontColor：Button文本颜色。 backgroundColor：Button背景颜色。 action： Button选中时的回调。

在实际开发中，可以使用primaryButton和secondaryButton来设置【确认】和【取消】按钮

4. 代码实现过程

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct AlertDialogPage {
  build() {
    RelativeContainer() {
      Button('警告框')
        .id('AlertDialogPageHelloWorld')
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }

        })
        .width('100%')
        .onClick(() => {
          AlertDialog.show({
            title: '温馨提示',
            message: '确定要删除吗？',
            alignment: DialogAlignment.Bottom,
            //点击点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
            autoCancel: false,
            primaryButton: {
              value: '确认',
              action: () => {
                promptAction.showToast({
                  message: '点击了确认按钮~~'
                })

              }
            },
            secondaryButton: {
              value: '取消',
              fontColor: '#999999',
              action: () => {
                promptAction.showToast({
                  message: '点击了取消按钮~~'
                })

              }
            }

          })
        })
    }
    .height('100%')
    .width('100%')
    .padding(20)
  }
}