【鸿蒙实战开发】ArkUI-构建自定义组件详解

本文链接：https://blog.youkuaiyun.com/HarmonyOS007/article/details/141130501

前言

ArkUI开发框架在NDK接口提供了自定义UI组件的能力，这些能力包括自定义测算，自定义布局和自定义绘制。开发者通过注册相关自定义回调事件接入ArkUI开发框架的布局渲染流程，这些事件需要使用registerNodeCustomEvent来进行声明，并通过addNodeCustomEventReceiver函数添加组件自定义事件的监听器，在该监听器的回调函数中处理相关自定义测算，自定义布局和自定义绘制逻辑。

说明

自定义组件事件注册需要addNodeCustomEventReceiver声明监听器注册和registerNodeCustomEvent声明需要的自定义事件类型，监听器只能监听已声明的事件。
需要关注事件的反注册逻辑，如在组件销毁前调用removeNodeCustomEventReceiver移除事件监听器，unregisterNodeCustomEvent通知ArkUI框架已监听的自定义组件事件不再需要监听。
addNodeCustomEventReceiver可以添加多个函数指针，每个函数指针都会在对应事件触发时触发，对应的removeNodeCustomEventReceiver需要传递对应的函数指针用于移除监听。
registerNodeCustomEventReceiver是全局监听函数，不同于addNodeCustomEventReceiver registerNodeCustomEventReceiver能够监听所有Native组件的自定义事件触发，但只能传递一个函数指针，多次调用使用最后一次的函数指针进行回调，释放时使用unregisterNodeCustomEventReceiver进行反注册。
自定义组件相关接口measureNode、layoutNode、setMeasuredSize、setLayoutPosition仅允许在对应的自定义事件(ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE、ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT)回调中使用。

自定义布局容器

以下示例创建了一个自定义容器，该容器将子组件最大值加上额外边距作为自身大小，同时对子组件进行居中排布。

图1 自定义容器组件

按照接入ArkTS页面创建前置工程。
创建自定义容器组件封装对象。

// ArkUICustomContainerNode.h
// 自定义容器组件示例

#ifndef MYAPPLICATION_ARKUICUSTOMCONTAINERNODE_H
#define MYAPPLICATION_ARKUICUSTOMCONTAINERNODE_H

#include "ArkUINode.h"

namespace NativeModule {

class ArkUICustomContainerNode : public ArkUINode {
public:
    // 使用自定义组件类型ARKUI_NODE_CUSTOM创建组件。
    ArkUICustomContainerNode()
        : ArkUINode((NativeModuleInstance::GetInstance()->GetNativeNodeAPI())->createNode(ARKUI_NODE_CUSTOM)) {
        // 注册自定义事件监听器。
        nativeModule_->addNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 声明自定义事件并转递自身作为自定义数据。
        nativeModule_->registerNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_MEASURE, 0, this);
        nativeModule_->registerNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_LAYOUT, 0, this);
    }

    ~ArkUICustomContainerNode() override {
        // 反注册自定义事件监听器。
        nativeModule_->removeNodeCustomEventReceiver(handle_, OnStaticCustomEvent);
        // 取消声明自定义事件。
        nativeModule_->unregisterNodeCustomEvent(handle_, ARKUI_NODE_CUSTOM_EVENT_ON_ME