HarmonyOS 鸿蒙Next中实现应用内消息通知(Toast 与弹窗提示)

HarmonyOS 鸿蒙Next中实现应用内消息通知(Toast 与弹窗提示) 在一些应用场景中,我们需要针对用户的提交进行Toast提示或者弹框确认,比如操作成功反馈,我们要提示设置成功/保存成功,针对一些高风险的操作,我们需要让用户二次确认,那针对这些情况我人们应该如何实现呢?

6 回复

更多关于HarmonyOS 鸿蒙Next中实现应用内消息通知(Toast 与弹窗提示)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


需要月活数据互助的开发者 企鹅:867386830

使用 promptAction.showToast 或 prompt.showToast。Toast 支持更多的自定义属性

实现思路

针对这些情况,其实鸿蒙OS已经为我们开发者准备了很好的工具,也就是:promptAction 。 通过promptAction我们可以实现一些短提示、长提示、成功、失败等各种提示,也可以针对高危操作进行二次确认提示。

完成实现代码

// src/main/ets/pages/NotificationPage.ets
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct NotificationPage {
  // 显示短时 Toast(约2秒)
  showToastShort() {
    promptAction.showToast({
      message: '操作成功',
      duration: 2000 // HarmonyOS 5 必须指定毫秒数(官方建议:短=2000,长=3500)
    });
  }

  // 显示长时 Toast
  showToastLong() {
    promptAction.showToast({
      message: '文件正在后台上传,请稍候...',
      duration: 3500
    });
  }

  // 显示确认弹窗
  showConfirmDialog() {
    promptAction.showDialog({
      title: '删除确认',
      message: '此操作不可恢复,是否继续?',
      buttons: [
        { text: '取消', color: '#666666' },
        { text: '删除', color: '#FF0000' }
      ]
    }).then((value)=>{
      value.index === 0 //表示“取消”,1 表示“删除”
      if (value.index === 1) {
        this.performDelete();
      }else{
        promptAction.showToast({
          message: '取消',
          duration: 2000 // HarmonyOS 5 必须指定毫秒数(官方建议:短=2000,长=3500)
        });
      }
    }).catch((err:Error)=>{

    })
  }

  performDelete() {
    // 执行删除逻辑
    promptAction.showToast({ message: '已删除', duration: 2000 });
  }

  build() {
    Column() {
      Button('显示短提示')
        .onClick(() => this.showToastShort())
        .margin(10)

      Button('显示长提示')
        .onClick(() => this.showToastLong())
        .margin(10)

      Button('显示删除确认')
        .onClick(() => this.showConfirmDialog())
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

实现的一些效果图:

cke_12841.png

在HarmonyOS Next中,应用内消息通知主要通过ToastAlertDialog实现。

Toast:用于短暂提示,自动消失。使用showToast方法,可设置显示位置(顶部、居中、底部)和时长。

AlertDialog:用于交互式弹窗,需用户操作。通过AlertDialog.show创建,可自定义标题、内容和按钮(如确认、取消),并绑定回调函数处理点击事件。

两者均需在UI主线程调用,遵循ArkTS声明式开发范式。

在HarmonyOS Next中,实现应用内消息通知(Toast)与弹窗提示,主要使用@ohos.promptAction模块。

1. Toast提示(短暂消息提示)

适用于操作成功等轻量反馈,显示一段时间后自动消失。

示例代码:

import promptAction from '@ohos.promptAction';

// 显示文本Toast
promptAction.showToast({
  message: '保存成功',
  duration: 2000 // 显示时长,单位毫秒
});

// 带图标Toast(需UI上下文)
promptAction.showToast({
  message: '操作成功',
  duration: 2000,
  bottom: '50vp' // 自定义位置
});

2. 对话框提示(Dialog)

用于需要用户确认的高风险操作,需用户交互后才会消失。

示例代码:

import promptAction from '@ohos.promptAction';
import { BusinessError } from '@ohos.base';

// 确认对话框
promptAction.showDialog({
  title: '确认删除',
  message: '删除后数据将无法恢复,请确认',
  buttons: [
    {
      text: '取消',
      color: '#666666'
    },
    {
      text: '确定',
      color: '#007DFF'
    }
  ]
}).then((result) => {
  if (result.index === 0) {
    // 用户点击了取消
  } else if (result.index === 1) {
    // 用户点击了确定,执行删除操作
  }
}).catch((error: BusinessError) => {
  console.error(`显示对话框失败: ${error.message}`);
});

3. Action菜单式弹窗

提供多个选项供用户选择。

示例代码:

promptAction.showActionMenu({
  title: '选择操作',
  buttons: [
    { text: '编辑', color: '#007DFF' },
    { text: '分享', color: '#007DFF' },
    { text: '删除', color: '#FF0000' }
  ]
}).then((result) => {
  switch (result.index) {
    case 0: // 编辑
      break;
    case 1: // 分享
      break;
    case 2: // 删除
      break;
  }
});

关键注意事项:

  • 导入模块:确保在代码中正确导入@ohos.promptAction模块。
  • UI上下文:部分Toast功能需要UI上下文,在UIAbility或自定义组件中使用。
  • 主线程:这些API需要在主线程调用,避免在非UI线程使用。
  • 按钮顺序:对话框按钮按数组顺序从左到右排列,可根据需要调整。
  • 错误处理:异步操作建议添加catch块处理可能的异常。

选择建议:

  • 简单反馈:使用showToast,无需用户交互。
  • 风险确认:使用showDialog,强制用户选择。
  • 多操作选择:使用showActionMenu,提供多个选项。

这些API已针对HarmonyOS Next优化,直接调用即可实现符合系统规范的通知效果。

回到顶部