HarmonyOS Next 弹窗系列教程（1）

弹窗的介绍

弹窗概述

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

比如以下这些效果：

弹窗的种类

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

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

• 非模态弹窗： 为弱交互形式，不会影响用户当前操作行为，用户可以不对其进行回应，通常都有时间限制，出现一段时间后会自动消失。一般用于告诉用户信息内容外还需要用户进行功能操作的场景。

模态弹窗

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

非模态弹窗

弹窗的分类

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

弹出框概述

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

• 自定义弹出框： 开发者需要根据使用场景，传入自定义组件填充在弹出框中实现自定义的弹出框内容。主要包括基础自定义弹出框 (CustomDialog)、不依赖 UI 组件的自定义弹出框 (openCustomDialog)。

• 固定样式弹出框： 开发者可使用固定样式弹出框，指定需要显示的文本内容和按钮操作，完成简单的交互效果。主要包括警告弹窗 (AlertDialog)、列表选择弹窗 (ActionSheet)、选择器弹窗 (PickerDialog)、对话框 (showDialog)、操作菜单 (showActionMenu)。

openCustomDialog 使用教程

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

1. 创建要显示的内容

2. 声明 UiContext

3. 声明 promptAction

4. 创建要弹窗显示的节点

5. 显示弹窗

创建要显示的内容

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

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

声明 UiContext

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

let uiContext = this.getUIContext();

声明 promptAction

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

let promptAction = uiContext.getPromptAction();

创建要弹窗显示的节点

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

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

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

显示弹窗

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

promptAction.openCustomDialog(contentNode);

完整代码

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

@Builderfunction buildText() {  Column() {    Text("自定义标题")      .fontSize(50)      .fontWeight(FontWeight.Bold)      .margin({ bottom: 36 })  }.backgroundColor('#FFF0F0F0')}
@Entry@Componentstruct 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%')  }}

参考链接

1. wrapBuilder
   

2. ComponentContent
   

3. getUIContext
   

4. getPromptAction