鸿蒙当中常见的几种弹窗功能

弹窗，可以说在实际的开发中是非常的常见，应用升级提示，用户信息提示等等，很多场景都会用到这样的弹窗，鸿蒙当中的弹窗，可以说类型丰富，其功能也是非常之多，按照种类而言，分为模态弹窗和非模态弹窗两种类型，其主要的区别就是在于用户是否必须做出响应；我们需要知道的是，前者是强交互形式，会中断用户当前的操作流程，后者是弱交互形式，不会影响用户当前操作行为。

我们针对其中比较常见的，简单的做一个分享，同样的，在实际的使用当中，ArkUI当前也给我们提供了固定样式和自定义两类弹出框组件，所谓的固定样式，就是UI不能做改变，只能通过属性进行改变，而自定义的话，就可以传递自己的组件，可以实现很多想要实现的场景。

固定样式弹出框

固定样式，虽然不能更改UI，但是如果在符合场景的基础上，我们只需要更改属性就能实现，还是非常的便利的，但是有一定的约束，毕竟是系统定义的，在有依赖UI上下文的时候，那么就不可以在非UI布局页面进行使用。

菜单弹窗

可以实现列表形式的展示效果，并且可以进行点击，代码实现如下：

try {
          let promptAction: PromptAction = this.getUIContext().getPromptAction()
          promptAction.showActionMenu({
            title: "请选择自己喜欢的水果",
            buttons: [
              {
                text: "苹果",
                color: "#222222"
              },
              {
                text: "香蕉",
                color: "#222222"
              },
            ]
          })
            .then(data => {
              console.info("===索引" + data.index)
            })
            .catch((err: Error) => {
              console.error("===错误：" + err)
            })
        } catch (error) {
        }

弹出效果如下：

对话框弹窗

对话框弹窗时最常见的，可以让用户进行确认和取消操作，代码如下：

let promptAction: PromptAction = this.getUIContext().getPromptAction()
          promptAction.showDialog({
            title: '我是标题',
            message: '我是表述信息',
            buttons: [
              {
                text: '取消',
                color: '#000000'
              },
              {
                text: '确定',
                color: '#ff0000'
              }
            ]
          }, (err, data) => {
            if (err) {
              console.error("===错误" + err)
              return;
            }
            console.info("===当前点击索引：" + data.index)
          });

展示效果如下：

时间滑动选择器弹窗

this.getUIContext().showTimePickerDialog({
          selected: new Date('2024-11-20'),
          textStyle: { color: '#222222', font: { size: "14", weight: FontWeight.Normal } },
          selectedTextStyle: { color: Color.Blue, font: { size: "18", weight: FontWeight.Regular } },
          acceptButtonStyle: {
            fontColor: Color.Blue,
            fontSize: "17",
            backgroundColor: "#e8e8e8",
            borderRadius: 10
          },
          cancelButtonStyle: {
            fontColor: Color.Red,
            fontSize: "17",
            backgroundColor: "#e8e8e8",
            borderRadius: 10
          }
        })

代码效果：

文本滑动选择器弹窗

文本选择器，常见于单列表滑动选择，多列表滑动选择，比如时间选择，城市选择等等，比如实现一个城市地址选择。

代码实现

设置数据源

{
      text: '河南省',
      children: [{ text: '郑州市', children: [{ text: '金水区' }, { text: '管城区区' }, { text: '二七区' }] },
        { text: '商丘市', children: [{ text: '梁园区' }, { text: '睢阳区' }, { text: '民权县' }] }]
    },
    {
      text: '黑龙江省',
      children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] },
        { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }]
    }, {
    text: '辽宁省',
    children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] },
      { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }]
  }
  ]
  private select: number = 0

直接调用

this.getUIContext().showTextPickerDialog({
          range: this.fruits,
          selected: this.select,
          onAccept: (value: TextPickerResult) => {
            this.select = value.index as number
          }
        })

代码效果：

当然了，还有很多的弹窗案例，比如自定义弹窗，列表弹窗，气泡提示等等，我们在日后的篇幅中再为大家详细的介绍。