HarmonyOS 弹框开发实战【1】

第一篇：弹框基础与常见坑点

做了这么久的HarmonyOS开发，弹框算是用得最多的组件之一了。说实话，刚开始接触的时候踩了不少坑，特别是在选择用哪种弹框的时候经常纠结。今天就把我这段时间的经验整理一下，希望能帮到大家。

弹框在移动端开发中真的太重要了，用户的每一个重要操作几乎都离不开它。删除文件要确认，登录失败要提示，选择图片要弹出选项...这些场景都需要弹框。HarmonyOS给我们提供了好几种弹框类型，但是什么时候用哪种，这个真的需要经验。

先说说AlertDialog，这个是我用得最多的。最开始我以为它就是个简单的提示框，后来发现功能还挺丰富的。比如做删除确认的时候，我一般会设置两个按钮，主按钮用红色表示危险操作，次按钮用灰色表示取消。这里有个小技巧，autoCancel最好根据场景来设置，如果是重要操作确认就设为false，避免用户误操作。

ActionSheet我觉得是最容易被忽视的一个组件。很多新手喜欢用AlertDialog堆一堆按钮，其实选择操作用ActionSheet体验会好很多。我在做图片上传功能的时候，用户点击头像可以选择拍照、相册选择或者删除当前头像，用ActionSheet就很合适。不过要注意，ActionSheet的选项不要太多，超过5个就显得拥挤了。

选择器类的弹框用起来感觉还行，但是有些细节需要注意。DatePickerDialog的日期范围一定要设置合理，我之前做生日选择的时候没设置结束日期，结果用户可以选择未来100年的日期，测试的时候被吐槽了。TimePickerDialog有个useMilitaryTime参数，国内用户一般习惯24小时制，记得设为true。

TextPickerDialog我用得相对少一些，主要是在做一些固定选项的选择时用到。比如选择城市、选择职业这种。有个坑是range数组的索引和显示的文本要对应好，我之前就因为索引搞错了导致选择结果不对。

在实际项目中，弹框的显示时机很关键。我见过有些应用一进来就弹好几个弹框，用户体验特别差。一般来说，弹框应该在用户有预期的时候出现，比如点击删除按钮后弹确认框，这是合理的。但是如果用户只是在浏览内容，突然弹出一个广告弹框，那就很讨厌了。

还有个经验是关于弹框的文案。标题要简洁有力，内容要说清楚后果。比如删除操作，我一般会写"确定删除这张照片吗？删除后无法恢复"，让用户明确知道操作的后果。按钮文案也很重要，"确定"和"删除"相比，"删除"更直接，用户不容易误操作。

// 我常用的删除确认弹框
this.getUIContext().showAlertDialog({
  title: '删除确认',
  message: '确定要删除这个文件吗？删除后无法恢复',
  autoCancel: false, // 重要操作不允许点击背景关闭
  primaryButton: {
    value: '删除',
    fontColor: Color.Red, // 红色表示危险操作
    action: () => {
      // 执行删除逻辑
      console.info('用户确认删除')
    }
  },
  secondaryButton: {
    value: '取消',
    action: () => {
      console.info('用户取消删除')
    }
  }
})

系统弹框虽然简单，但是定制性有限。有时候产品要求的样式系统弹框满足不了，这时候就需要用自定义弹框了。不过能用系统弹框就尽量用系统的，毕竟系统弹框在适配和性能上都做得比较好。