弹窗探索鸿蒙之旅：揭秘弹窗的本质与奥秘

嘿，小伙伴们！👋 今天我们要一起探索那些在日常应用中无处不在的小精灵------弹窗！💬

🤔 ‌弹窗到底是什么？‌

简单来说，弹窗就是应用程序中突然冒出来的交互元素，它们像是应用与用户之间的即时对话框，时刻准备着提醒你："嘿，这里有个重要的事儿！"🚨

🌈 ‌弹窗的两大分类‌

‌模态弹窗‌：这可是个严格的家伙，它会打断你的操作，强制你先处理它！比如"确认删除？"这种关键时刻，它绝不含糊！🚫

‌非模态弹窗‌：相比之下，它就显得温柔多了。它会默默展示信息，但绝不会打扰你的操作流程。你可以选择理它或不理它，它都会乖乖地等在那里。😌

📱 ‌鸿蒙系统的弹窗家族‌

HarmonyOS真是个宝藏系统，它提供了超多弹窗组件，每个都有独特的应用场景哦！👇

‌弹出框（Dialog）‌：基础款，适合展示重要信息或操作。

‌菜单控制（Menu）‌：长按图标时的操作选项，就靠它啦！

‌气泡提示（Popup）‌：点击问号，看看有啥帮助信息吧！

‌绑定模态页面‌：不关闭原界面，也能看新内容哦！

‌即时反馈（Toast）‌：操作成功？它来告诉你！

‌设置浮层（OverlayManager）‌：自定义UI？没问题，它最灵活了！

💡 ‌自定义弹窗实战‌

想创建个性化的弹窗？没问题，鸿蒙的ArkUI框架帮你实现！五个步骤，轻松搞定！👇

设计弹窗UI内容

获取UI上下文对象

获取提示操作控制器

创建弹窗内容节点

触发弹窗显示

看，是不是很简单？😉

👉 ‌完整实现代码‌：

别急，我已经为你准备好了完整的代码示例，点击这里查看：自定义弹窗完整代码🔗

openCustomDialog 实战指南

下面通过五个关键步骤，快速掌握自定义弹窗的创建：

设计弹窗的 UI 内容

获取 UI 上下文对象

获取提示操作控制器

创建弹窗内容节点

触发弹窗的显示

创建弹窗内容

首先，使用@Builder装饰器定义弹窗的视觉内容。这是一种特殊的 UI 构建函数，专用于组织界面元素。

@Builder

function buildText() {

Column() {

Text("自定义标题")

.fontSize(50)

.fontWeight(FontWeight.Bold)

.margin({ bottom: 36 })

}.backgroundColor('#FFF0F0F0')

}

获取 UiContext

接下来，通过getUIContext()方法获取 UI 上下文实例，它是连接组件与 UI 系统的桥梁。

let uiContext = this.getUIContext();

获取 promptAction

然后，获取promptAction对象，它是创建和管理各类弹窗的核心控制器。

let promptAction = uiContext.getPromptAction();

创建弹窗节点

现在，创建实际要显示的弹窗节点。ComponentContent用于封装组件内容，使其可以在不同上下文中传递和使用。

通过全局函数wrapBuilder包装之前定义的buildText构建器，便于后续调用。

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

显示弹窗

最后，调用promptAction的openCustomDialog方法，传入我们的contentNode，弹窗就会按照设计显示出来。

promptAction.openCustomDialog(contentNode);

实现效果展示：

HarmonyOS Next 弹窗系列教程（1）-鸿蒙开发者社区

完整实现代码

以下是实现自定义弹窗的完整代码示例，可直接使用：

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%')

}

💖 ‌总结‌

弹窗虽小，但作用巨大！它们像是应用中的小助手，时刻准备着为你提供帮助和指引。希望今天的分享能让你对弹窗有更深入的了解哦！🥰