【鸿蒙 HarmonyOS】@ohos.promptAction (弹窗)

news2024/11/18 4:27:46

一、背景

创建并显示文本提示框、对话框和操作菜单。

文档地址👉：文档中心

说明

本模块首批接口从API version 9开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

该模块不支持在UIAbility的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的getPromptAction方法获取当前UI上下文关联的PromptAction对象。

二、导入模块

import promptAction from '@ohos.promptAction';

三、实现方式

3.1、创建并显示文本提示框

代码示例：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptPage {

  build() {
    Column() {
      Button('显示一个toast').margin({top:100})
        .onClick(()=>{
          promptAction.showToast({
            message: '文本提示框',
            duration: 2000,
            bottom:200
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

实现效果：

参数说明如下：

message：显示的文本信息，必填项。
duration：Toast 显示时间，单位毫秒，范围 [1500, 10000]，默认1500。

bottom：设置弹窗边框距离屏幕底部的位置。默认值：80vp

3.2、创建并显示对话框

3.2.1、promptAction.showDialog同步

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

代码示例：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptPage {

  build() {
    Column() {
      Button('显示一个Dialog').margin({top:100})
        .onClick(()=>{
          promptAction.showDialog({
            title:'标题',
            message:'内容-同步',
            buttons:[
              {
                text: "按钮一",
                color: "#333333"
              },
              {
                text: "按钮二",
                color: "#999999"
              }
            ]
          })
            .then(data=>{
              console.info('showDialog success, click button: ' + data.index);
            })
            .catch((err:Error)=>{
              console.info('showDialog error: ' + err);
            })
        })
    }
    .width('100%')
    .height('100%')
  }
}

实现效果：

3.2.2、promptAction.showDialog异步

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

代码示例：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptPage {

  build() {
    Column() {
      Button('显示一个Dialog').margin({top:100})
        .onClick(()=>{
          promptAction.showDialog({
            title:'标题',
            message:'内容-异步',
            buttons:[
              {
                text: "按钮一",
                color: "#333333"
              },
              {
                text: "按钮二",
                color: "#999999"
              }
            ]
          },(err,data)=>{
            if (err) {
              console.info('showDialog err: ' + err);
              return;
            }
            console.info('showDialog success callback, click button: ' + data.index);
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

实现效果：

参数说明如下：

title：对话框标题文本。
message：对话框内容文本。
buttons：对话框中按钮的数组，至少配置一个，最多三个

ShowDialogSuccessResponse

对话框的响应结果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	类型	必填	说明
index	number	否	选中按钮在buttons数组中的索引。

3.3、创建并显示操作菜单

3.3.1、promptAction.showActionMenu异步

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

代码示例：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptPage {

  build() {
    Column() {
      Button('显示一个menu').margin({top:100})
        .onClick(()=>{
          promptAction.showActionMenu({
            title:'标题-异步',
            buttons:[
              {
                text: "按钮一",
                color: "#666666"
              },
              {
                text: "按钮二",
                color: "#000000"
              }
            ]
          },(err,data)=>{
            if (err) {
              console.info('showActionMenu err: ' + err);
              return;
            }
            console.info('showActionMenu success callback, click button: ' + data.index);
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

实现效果：

3.3.2、prompt.showActionMenu同步

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

代码示例：

import promptAction from '@ohos.promptAction';
@Entry
@Component
struct PromptPage {

  build() {
    Column() {
      Button('显示一个menu').margin({top:100})
        .onClick(()=>{
          promptAction.showActionMenu({
            title:'标题-同步',
            buttons:[
              {
                text: "按钮一",
                color: "#666666"
              },
              {
                text: "按钮二",
                color: "#000000"
              }
            ]
          })
            .then(data => {
              console.info('showActionMenu success, click button: ' + data.index);
            })
            .catch((err:Error) => {
              console.info('showActionMenu error: ' + err);
            })
        })
    }
    .width('100%')
    .height('100%')
  }
}

实现效果：