鸿蒙5.0进阶开发：UI开发-使用XComponent实现画中画功能开发

提供用于图形绘制和媒体数据写入的Surface，XComponent负责将其嵌入到视图中，支持应用自定义Surface位置和大小。

本文以视频播放为例，介绍通过XComponent实现画中画功能的基本开发步骤。

本文以视频播放为例，介绍通过typeNode实现画中画功能的基本开发步骤。

可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。

目前XComponent组件在type设置为“surface”时主要有两个应用场景。

提供用于图形绘制和媒体数据写入的Surface...........

XComponent组件作为一种渲染组件，可用于EGL/OpenGLES和媒体数据写入..........

XComponent组件作为一种渲染组件，通常用于满足开发者较为复杂的自定义渲染需求

Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。

Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。

Native XComponent是XComponent组件提供在Native层的实例，可作为JS层和Native层XComponent绑定的桥梁。XComponent所提供的NDK接口都依赖于该实例。接口能力包括获取Native Window实例、获取XComponent的布局/事件信息、注册XComponent的生命周期回调、注册XComponent的触摸、鼠标、按键等事件回调。利用Native XComponent提供的接口注册XComponent的生命周期和事件回调。

XComponent组件作为一种渲染组件，可用于EGL/OpenGLES和媒体数据写入..........

在 HarmonyOS ArkUI 的组件体系里，绝大多数组件都是"声明式"的——你用 ArkTS 描述 UI 结构，框架负责渲染到屏幕上。高性能的原生图形渲染，比如游戏引擎渲染、OpenGL 绘图、视频解码输出、AR/VR 场景。这时候就需要XComponent。它是 ArkUI 中的一个"开口"，允许你把 EGL/OpenGL ES 渲染内容、Native 层的 UIAbility 组件，甚至纹理共享内容嵌入到 ArkUI 的页面中，和普通组件一起布局。理解XComponent。

用于显示写入了EGL/OpenGLES或媒体数据的组件。

XComponent提供了应用在native侧调用OpenGLES图形接口的能力，本文主要介绍如何配合Vsync事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在UI主线程中完成，即使主线程卡顿，动画效果也不会受影响。

本文主要介绍如何配合 Vsync 事件，完成自定义动画

本文主要介绍如何配合 Vsync 事件，完成自定义动画。

XComponent和Progress是鸿蒙应用开发中两个非常重要的组件。XComponent提供了连接ArkUI与Native层的能力，特别适用于高性能图形渲染、视频处理等场景；而Progress组件则提供了丰富的进度展示功能，能够满足各种场景下的进度展示需求。通过合理使用这两个组件，可以大大提升应用的用户体验和性能表现。在实际开发中，应根据具体需求选择合适的组件类型和配置，并遵循最佳实践，以确保应用的稳定性和性能。

本文详细介绍了@pura/harmony-utils工具库中DateUtil模块的日期格式化功能。主要内容包括：核心API（format、formatNow、parse方法）及格式化模板符号说明；完整使用步骤与代码示例；进阶用法如日志时间戳和文件名生成；注意事项（大小写敏感、月份索引、时区等）及常见问题解答。该工具提供了简洁易用、类型安全的日期格式化方案，支持自定义模板，适用于各种时间展示场景，能有效提升开发效率。