HarmonyOS应用开发实战：猫猫大作战-ComponentContent 的 wrapBuilder 包装方式

前言

ComponentContent是 HarmonyOS 弹窗体系的内容载体——openCustomDialog和bindContentCover等弹窗 API 都通过 ComponentContent 加载自定义组件内容。

本文以「猫猫大作战」的弹窗内容节点管理为锚点，讲解 ComponentContent 的 wrapBuilder 包装方式。

提示：本系列不讲 ArkTS 基础语法与环境搭建，假设你已跟完第 1–96 篇。本篇是阶段三第 97 篇。

一、ComponentContent 与 wrapBuilder

1.1 基本使用

@Builder function MyDialogContent() { Column() { Text('自定义弹窗内容') } } // 通过 wrapBuilder 包装后使用 const builder = wrapBuilder(MyDialogContent);

1.2 ComponentContent 创建

import { ComponentContent } from '@kit.ArkUI'; const content = new ComponentContent(builder, params);

二、弹窗中的应用

@Builder function GameOverDialog(score: number) { Column() { Text('游戏结束').fontSize(24) Text(`得分: ${score}`).fontSize(20) } } // 在弹窗中使用 const builder = wrapBuilder(GameOverDialog);

三、总结

ComponentContent 是弹窗内容的管理单元，通过 wrapBuilder 包装 @Builder 函数后创建弹窗内容节点。

核心要点：

• wrapBuilder(MyBuilder)包装 @Builder 函数
• ComponentContent作为弹窗内容载体
• 适用于 CustomDialog、bindContentCover 等高级弹窗

下一篇预告：第 98 篇将深入 bindContentCover——全屏模态页面的实现。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• ComponentContent API 参考
• wrapBuilder 文档
• 开源鸿蒙跨平台社区
• 第 96 篇：CustomDialog
• 第 98 篇：bindContentCover