弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在UI开发中，弹框是重要且不可忽视的组件。

HarmonyOS内置了多种系统弹框，分别有AlertDialog 、TextPickerDialog 、DatePickerDialog以及TimePickerDialog等。

本文将详细介绍系统弹框的封装和使用，并着重展现自定义弹框的实现。

系统弹框

AlertDialog

AlertDialog是警告弹窗，一般由App主动弹出，用于警告和确认用户的操作行为，需用户手动点击操作按钮来取消或进行下一步。

AlertDialog的实现

如下图中的“删除联系人”弹框，一个AlertDialog包含标题、内容和操作区三个部分组成，操作区包含两个按钮，我们可以在按钮的点击事件里添加对应响应逻辑。

【拥抱鸿蒙】HarmonyOS之构建一个自定义弹框_自定义

以上弹框的实现代码如下：

AlertDialog.show(

      {

        title: '删除联系人', // 标题

        message: '是否需要删除所选联系人?', // 内容

        autoCancel: false, // 点击遮障层时，是否关闭弹窗。

        alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式

        offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量

        primaryButton: {

          value: '取消',

          action: () => {

            console.info('Callback when the first button is clicked');

          }

        },

        secondaryButton: {

          value: '删除',

          fontColor: '#D94838',

          action: () => {

            console.info('Callback when the second button is clicked');

          }

        },

        cancel: () => { // 点击遮障层关闭dialog时的回调

          console.info('Closed callbacks');

        }

      }

    )

  })
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
AlertDialog的封装

我们可以对AlertDialog进行封装，作为工具类调用。

export class CommonUtils {

/\*\*

   \* Common alert dialog

   \* @param title 标题

   \* @param msg 提示信息

   \* @param context 需要保存状态的UIAbility所对应的context

   \* @param primaryCallback 第一个按钮点击事件的回调

   \* @param secondCallback 第二个按钮点击事件的回调

   \*/

  commonAlertDialog(title:ResourceStr, msg: ResourceStr, context: common.UIAbilityContext, primaryCallback: Function, secondCallback: Function) {

    AlertDialog.show({

      title: title,

      message: msg,

      alignment: DialogAlignment.Bottom,

      offset: {

        dx: 0,

        dy: CommonConstants.DY\_OFFSET

      },

      primaryButton: {

        value: $r('app.string.cancel\_button'),

        action: () => {

          primaryCallback();

        }

      },

      secondaryButton: {

        value: $r('app.string.definite\_button'),

        action: () => {

          context.terminateSelf()

          secondCallback();

        }

      }

    });

  }

}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.

这里创建了CommonUtils的工具类，把标题、提示信息作为创建自定义弹框的参数，按钮的点击事件可在回调里分别实现。

有了这种封装，我们就能很容易地在App里调用一个风格统一的AlertDialog弹框了。

CommonUtils.commonAlertDialog("提示", "是否退出登录", context, () => {

  // 取消

  

}, () => {

  // 确认

  

});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
TextPickerDialog

这是一种文本滑动选择弹窗，一般用于从多个选项中单选内容，再将用户所选的内容返回给调用方。

如下图所示，这里实现了一个选择“足球主队”的弹窗，用户上下滑动滑块再点击“确认”就可以完成选择。