HarmonyOS Next 弹窗系列教程（1）

弹窗的介绍

弹窗概述

弹窗一般指打开应用时自动弹出或者用户行为操作时弹出的 UI 界面，用于短时间内展示用户需关注的信息或待处理的操作。

比如以下这些效果：

弹窗的种类

根据用户交互操作场景，弹窗可分为模态弹窗 和非模态弹窗两种类型，其区别在于用户是否必须对其做出响应。

模态弹窗： 为强交互形式，会中断用户当前的操作流程，要求用户必须做出响应才能继续其他操作，通常用于需要向用户传达重要信息的场景。
非模态弹窗： 为弱交互形式，不会影响用户当前操作行为，用户可以不对其进行回应，通常都有时间限制，出现一段时间后会自动消失。一般用于告诉用户信息内容外还需要用户进行功能操作的场景。

模态弹窗

为强交互形式，会中断用户当前的操作流程，要求用户必须做出响应才能继续其他操作，通常用于需要向用户传达重要信息的场景。

非模态弹窗

弹窗的分类

HarmonyOS Next 中将弹窗进行了如下这些分类

弹窗名称	应用场景
弹出框（Dialog）	当需要展示用户当前需要或必须关注的信息内容或操作时，例如二次退出应用等，应优先考虑使用此弹出框。
菜单控制（Menu）	当需要给指定的组件绑定用户可执行的操作时，例如长按图标展示操作选项等，应优先考虑使用此弹窗。
气泡提示（Popup）	当需要给指定的组件提示时，例如点击一个问号图标弹出一段帮助提示等，应优先考虑使用此弹窗。
绑定模态页面（bindContentCover/bindSheet）	当需要新的界面覆盖在旧的界面上，且旧的界面不消失的一种转场方式时，例如缩略图片点击后查看大图等，应优先考虑使用此弹窗。
即时反馈（Toast）	当需要在一个小的窗口中提供用户当前操作的简单反馈时，例如提示文件保存成功等，应用优先考虑使用此弹窗。
设置浮层（OverlayManager）	当需要完全自定义内容、行为、样式时，可以使用浮层将 UI 展示在页面之上，例如音乐/语音播放悬浮球/胶囊等，应优先考虑使用此弹窗。

弹出框概述

用户需在模态弹出框内完成相关交互任务之后，才能退出模态模式。弹出框可以不与任何组件绑定，其内容通常由多种组件组成，如文本、列表、输入框、图片等，以实现布局。ArkUI 当前提供了固定样式 和自定义两类弹出框组件。

自定义弹出框： 开发者需要根据使用场景，传入自定义组件填充在弹出框中实现自定义的弹出框内容。主要包括基础自定义弹出框 (CustomDialog)、不依赖 UI 组件的自定义弹出框 (openCustomDialog)。
固定样式弹出框： 开发者可使用固定样式弹出框，指定需要显示的文本内容和按钮操作，完成简单的交互效果。主要包括警告弹窗 (AlertDialog)、列表选择弹窗 (ActionSheet)、选择器弹窗 (PickerDialog)、对话框 (showDialog)、操作菜单 (showActionMenu)。

openCustomDialog 使用教程

我们分成 3 步来使用openCustomDialog弹窗

创建要显示的内容
声明 UiContext
声明 promptAction
创建要弹窗显示的节点
显示弹窗

创建要显示的内容

使用 @Builder 修饰的不是普通的函数，而是负责渲染节点的内容构造函数。

typescript 复制代码

@Builder
function buildText() {
  Column() {
    Text("自定义标题")
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

声明 UiContext

通过getUIContext()接口获取 UI 上下文实例UIContext对象

typescript 复制代码

let uiContext = this.getUIContext();

声明 promptAction

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

typescript 复制代码

let promptAction = uiContext.getPromptAction();

创建要弹窗显示的节点

omponentContent表示组件内容的实体封装，其对象支持在非 UI 组件中创建与传递，便于开发者对弹窗类组件进行解耦封装

wrapBuilder 是一个全局函数，功能是用来封装全局@Builder，方便@Builder 传递和调用

typescript 复制代码

let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText));

显示弹窗

最后，调用的 promptAction 的 openCustomDialog 方法，传入 contentNode 便可实现弹窗效果

typescript 复制代码

promptAction.openCustomDialog(contentNode);

完整代码

typescript 复制代码

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


@Builder
function buildText() {
  Column() {
    Text("自定义标题")
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Button("click me")
          .onClick(() => {
            let uiContext = this.getUIContext();
            let promptAction = uiContext.getPromptAction();
            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText));
            promptAction.openCustomDialog(contentNode);
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}

HarmonyOS Next 弹窗系列教程（1）