HarmonyOS 鸿蒙Next中如何使用promptAction显示Toast、Dialog和ActionSheet？

HarmonyOS 鸿蒙Next中如何使用promptAction显示Toast、Dialog和ActionSheet？ 我需要显示提示信息和对话框，promptAction 如何使用？如何显示 Toast、确认对话框和操作菜单？

3 回复

实现思路：

  1. 使用 promptAction.showToast 显示轻提示：
import { promptAction } from '@kit.ArkUI';

promptAction.showToast({
  message: '操作成功',
  duration: 2000
});
  1. 使用 promptAction.showDialog 显示对话框：
promptAction.showDialog({
  title: '提示',
  message: '确定要删除吗？',
  buttons: [
    { text: '取消', color: '#666' },
    { text: '确定', color: '#007AFF' }
  ]
}).then((result) => {
  if (result.index === 1) {
    // 用户点击确定
  }
});
  1. 使用 promptAction.showActionMenu 显示操作菜单：
promptAction.showActionMenu({
  title: '选择操作',
  buttons: [
    { text: '拍照', color: '#007AFF' },
    { text: '从相册选择', color: '#007AFF' },
    { text: '取消', color: '#999' }
  ]
}).then((result) => {
  console.info(`Selected: ${result.index}`);
});
  1. 完整示例代码：
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct PromptActionPage {
  @State message: string = '';

  showToast(msg: string) {
    promptAction.showToast({
      message: msg,
      duration: 2000,
      bottom: 100
    });
  }

  async showConfirmDialog(): Promise<boolean> {
    try {
      const result = await promptAction.showDialog({
        title: '确认删除',
        message: '删除后无法恢复，确定要删除吗？',
        buttons: [
          { text: '取消', color: '#666666' },
          { text: '删除', color: '#FF4444' }
        ]
      });
      return result.index === 1;
    } catch {
      return false;
    }
  }

  async showInputDialog() {
    try {
      const result = await promptAction.showDialog({
        title: '输入名称',
        message: '请输入新的名称',
        buttons: [
          { text: '取消', color: '#666666' },
          { text: '确定', color: '#007AFF' }
        ]
      });
      if (result.index === 1) {
        this.showToast('已确认');
      }
    } catch (err) {
      console.error(`Dialog error: ${JSON.stringify(err)}`);
    }
  }

  async showActionSheet() {
    try {
      const result = await promptAction.showActionMenu({
        title: '选择图片来源',
        buttons: [
          { text: '拍照', color: '#007AFF' },
          { text: '从相册选择', color: '#007AFF' },
          { text: '取消', color: '#999999' }
        ]
      });

      switch (result.index) {
        case 0:
          this.showToast('选择了拍照');
          break;
        case 1:
          this.showToast('选择了相册');
          break;
        default:
          break;
      }
    } catch (err) {
      console.error(`ActionMenu error: ${JSON.stringify(err)}`);
    }
  }

  build() {
    Column({ space: 20 }) {
      Text('弹窗示例').fontSize(20).fontWeight(FontWeight.Bold)

      Button('显示 Toast').onClick(() => {
        this.showToast('这是一条提示消息');
      })

      Button('显示确认对话框').onClick(async () => {
        const confirmed = await this.showConfirmDialog();
        if (confirmed) {
          this.showToast('已删除');
        }
      })

      Button('显示输入对话框').onClick(() => {
        this.showInputDialog();
      })

      Button('显示操作菜单').onClick(() => {
        this.showActionSheet();
      })
    }
    .width('100%')
    .padding(20)
  }
}

更多关于HarmonyOS 鸿蒙Next中如何使用promptAction显示Toast、Dialog和ActionSheet？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用promptAction模块显示Toast、Dialog和ActionSheet。

  • Toast：调用promptAction.showToast()方法，传入消息内容等参数。
  • Dialog：使用promptAction.showDialog()，设置标题、消息和按钮选项。
  • ActionSheet：通过promptAction.showActionMenu()实现，配置菜单项列表。

需在代码中导入@ohos.promptAction模块，并在module.json5中声明ohos.permission.SYSTEM_FLOAT_WINDOW权限（仅Dialog需要）。具体参数参考官方API文档。

在HarmonyOS Next中，promptAction 是用于显示提示框、对话框和操作菜单的统一接口。以下是具体使用方法：

1. 显示Toast提示

使用 showToast 方法显示短暂的消息提示：

import { promptAction } from '@kit.ArkUI';

// 显示文本Toast
promptAction.showToast({
  message: '操作成功',
  duration: 2000  // 持续时间（毫秒）
});

// 带图标的Toast
promptAction.showToast({
  message: '保存成功',
  duration: 2000,
  icon: '/common/images/icon.png'  // 图标路径
});

2. 显示确认对话框

使用 showDialog 方法显示带按钮的对话框：

import { promptAction } from '@kit.ArkUI';

promptAction.showDialog({
  title: '确认删除',
  message: '确定要删除这个项目吗？',
  buttons: [
    {
      text: '取消',
      color: '#666666'
    },
    {
      text: '删除',
      color: '#FF0000'
    }
  ]
}).then((result) => {
  if (result.index === 1) {
    // 用户点击了"删除"
    console.log('执行删除操作');
  }
});

3. 显示操作菜单（ActionSheet）

使用 showActionSheet 方法显示底部操作菜单：

import { promptAction } from '@kit.ArkUI';

promptAction.showActionSheet({
  title: '选择操作',
  items: [
    { text: '拍照' },
    { text: '从相册选择' },
    { text: '取消', style: 'cancel' }
  ]
}).then((result) => {
  switch (result.index) {
    case 0:
      console.log('拍照');
      break;
    case 1:
      console.log('从相册选择');
      break;
  }
});

关键参数说明：

  • Toast：message（消息内容）、duration（显示时长）、icon（图标）
  • Dialog：title（标题）、message（消息）、buttons（按钮数组）
  • ActionSheet：title（标题）、items（选项数组）、可设置cancel样式

所有方法都返回Promise，可通过.then()处理用户选择结果。按钮/选项的索引从0开始，对应数组中的顺序。

回到顶部