ContentSlot: Representing a Placeholder in Hybrid Development

The ContentSlot component is a component designed to render and manage components created on the native layer using C APIs.

With support for hybrid development, the ContentSlot component is recommended when the container is an ArkTS component and the child component is created on the native side.

APIs

ArkTS APIs

abstract class Content {
}

Native APIs

Development and Implementation

Code Implementation in ArkTS

import { nativeNode } from'libNativeNode.so' // The so. file implemented by you.
import { NodeContent } from '@kit.ArkUI'

@Entry
@Component
struct Parent {
    private nodeContent: Content = new NodeContent();

    aboutToAppear() {
        // Create a node through the C API and add it to the nodeContent manager.
        nativeNode.createNativeNode(this.nodeContent);
    }

    build() {
        Column() {
            // Display the native components stored in the nodeContent manager.
            ContentSlot(this.nodeContent)
        }
    }
}

Code Implementation in C

For details about the basic development knowledge of Node-API, see Getting Started with the NDK.

This topic only describes how to implement the logic code related to ContentSlot. Create a component on the C side. For details, see NDK API Overview.

#include "napi/native_api.h"
#include "arkui/native_type.h"
#include "arkui/native_node.h"
#include "arkui/native_node_napi.h"
#include "arkui/native_interface.h"
#include "hilog/log.h"

ArkUI_NodeContentHandle nodeContentHandle_ = nullptr;
ArkUI_NativeNodeAPI_1 *nodeAPI;
const unsigned int LOG_PRINT_DOMAIN = 0xFF00;

// NativeNode management class defined by Manager for applications.
napi_value Manager::CreateNativeNode(napi_env env, napi_callback_info info) {
    // Solve null pointer and out-of-bounds issues related to Node-API.
    if ((env == nullptr)||(info == nullptr)) {
        return nullptr;
    }

    size_t argc = 1;
    napi_value args[1] = { nullptr };
    if (napi_get_cb_info(env, info, &argc, args, nullptr, nullptr) != napi_ok) {
        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode napi_get_cb_info failed");
    }

    if (argc != 1) {
        return nullptr;
    }

    nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNode_API_1"));

    // Point nodeContentHandle_ to a nodeContent object passed in from ArkTS.
    OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &nodeContentHandle_);

    if (nodeAPI != nullptr) {
        if (nodeAPI->createNode != nullptr && nodeAPI->addChild != nullptr) {
            ArkUI_NodeHandle component;
            // Create components in C.
            component = CreateNodeHandle();
            // Add the component to the nodeContent manager.
            OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
        }
    }
}

Registering Attach and Detach Events and Obtaining Corresponding Content Object

auto nodeContentEvent = [](ArkUI_NodeContentEvent *event) {
    ArkUI_NodeContentHandle content = OH_ArkUI_NodeContentEvent_GetNodeContentHandle(event);
    // Additional logic required for different contents.
    if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_ATTACH_TO_WINDOW) {
        // Logic to be triggered when an attach event occurs on ContentSlot.
    } else if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_DETACH_FROM_WINDOW) {
        // Logic to be triggered when a detach event occurs on ContentSlot.
    };
};
// Register an event with nodeContent.
OH_ArkUI_NodeContent_RegisterCallback(nodeContentHandle_, nodeContentEvent);

Adding Child Components

ArkUINodeHandle component;
component = CreateNodeHandle();
// Add the component to the nodeContent manager.
OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);

Inserting Child Components

ArkUINodeHandle component;
component = CreateNodeHandle();
// Insert a component into the specified position of the nodeContent manager.
OH_ArkUI_NodeContent_InsertNode(nodeContentHandle_, component, position);

Removing Child Components

// Remove a component from the nodeContent manager.
OH_ArkUI_NodeContent_RemoveNode(nodeContentHandle_, component);

Setting Custom Attributes

// Create the custom data to be defined.
void *userData = CreateUserData();
OH_ArkUI_NodeContent_SetUserData(nodeContentHandle_, userData);

Obtaining Custom Attributes

void *userData = OH_ArkUI_NodeContent_GetUserData(nodeContentHandle_);

你可能感兴趣的鸿蒙文章

harmony 鸿蒙\@AnimatableExtend Decorator: Definition of Animatable Attributes

harmony 鸿蒙Application State Management Overview

harmony 鸿蒙AppStorage: Storing Application-wide UI State

harmony 鸿蒙Basic Syntax Overview

harmony 鸿蒙\@Builder Decorator: Custom Builder Function

harmony 鸿蒙\@BuilderParam Decorator: Referencing the \@Builder Function

harmony 鸿蒙Creating a Custom Component

harmony 鸿蒙Mixing Use of Custom Components

harmony 鸿蒙Constraints on Access Modifiers of Custom Component Member Variables

harmony 鸿蒙Freezing a Custom Component