【鸿蒙开发】API弹窗showToast，showDialog，showActionMenu

最新推荐文章于 2024-08-05 17:58:14 发布

d312697510

最新推荐文章于 2024-08-05 17:58:14 发布

阅读量1.5k

点赞数 13

文章标签： harmonyos 华为鸿蒙 typescript

本文链接：https://blog.csdn.net/d312697510/article/details/137505642

版权

本文介绍了在OHOS平台中如何使用promptAction模块实现文本提示框（showToast）、对话框（showDialog）以及操作菜单（showActionMenu）的创建和显示，提供代码示例以帮助开发者理解和应用。

摘要由CSDN通过智能技术生成

0. 导入模块

import promptAction from '@ohos.promptAction'

1. showToast

创建并显示文本提示框。

showToast(options: ShowToastOptions): void

ShowToastOptions

文本提示框的选项。

名称	类型	必填	说明
message	string\| Resource9+	是	显示的文本信息。默认字体为'Harmony Sans'，不支持设置其他字体。
duration	number	否	默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。
bottom	string\| number	否	设置弹窗边框距离屏幕底部的位置。

示例

import promptAction from '@ohos.promptAction'

@Entry
@Component
struct APage {
  build() {
    Column() {
      Button("提示弹窗")
        .margin(20)
        .onClick(() => {
          promptAction.showToast({
            message: '请先登录！',
            duration: 2000,
            bottom: 100
          });
        })
    }
    .width('100%')
    .height('100%')
  }
}

2. showDialog

promise

创建并显示对话框，对话框响应后同步返回结果。

showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>

callback

创建并显示对话框，对话框响应结果异步返回。

showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void

ShowDialogOptions

对话框的选项。

名称	类型	必填	说明
title	string\| Resource9+	否	标题文本。
message	string\| Resource9+	否	内容文本。
buttons	[Button,Button?,Button?]	否	对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。

示例

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct APage {
  build() {
    Column() {
      Button("对话弹窗").onClick(() => {
        promptAction.showDialog({
          title: '确认要添加吗？',
          message: '添加后将获得更多内容',
          buttons: [
            {
              text: '确定',
              color: '#00f',
            },
            {
              text: '取消',
              color: '#f00',
            }
          ],
        })
          .then(data => {
            console.info('添加成功', data.index);
          })
          .catch((err) => {
            console.info('添加失败', err);
          })
      })
    }
    .width("100%")
    .height("100%")
  }
}

3. showActionMenu

promise

创建并显示操作菜单，菜单响应后同步返回结果。

showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>

callback

创建并显示操作菜单，菜单响应结果异步返回。

showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void

ActionMenuOptions

操作菜单的选项。

名称	类型	必填	说明
title	string\| Resource9+	否	标题文本。
buttons	[Button,Button?,Button?,Button?,Button?,Button?]	是	菜单中菜单项按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。

示例

import promptAction from '@ohos.promptAction';

@Entry
@Component
struct APage {
  build() {
    Column() {
      Button("菜单弹窗").onClick(() => {
        promptAction.showActionMenu({
          title: "选择水果",
          buttons: [
            {
              text: "苹果",
              color: "#f00"
            },
            {
              text: "橙子",
              color: "#f0f"
            },
            {
              text: "香蕉",
              color: "#ff0"
            }
          ]
        })
          .then(data => {
            console.log("showActionMenu success, data: " + JSON.stringify(data));
          })
          .catch(err => {
            console.log("showActionMenu failed, err: " + JSON.stringify(err));
          })
      })
    }
    .width("100%")
    .height("100%")
  }
}