【鸿蒙基于API 13实战开发】—— NDK接口构建UI：接入ArkTS页面_鸿蒙 jni

📚鸿蒙开发往期学习笔录✒️：

✒️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
✒️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
✒️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
✒️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
✒️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
✒️ 记录一场鸿蒙开发岗位面试经历~
✒️ 持续更新中……

占位组件

使用NDK接口构建UI界面时，需要在ArkTS页面创建用于挂载NDK接口创建组件的占位组件。占位组件类型为 ContentSlot ，ContentSlot能够绑定一个 NodeContent 对象，该对象可通过Node-API传递到Native侧挂载显示Native组件。

• 占位组件和其他ArkTS内置组件使用方法相同。

import { NodeContent } from \'@kit.ArkUI\';@Entry@Componentstruct Index { // 初始化NodeContent对象。 private rootSlot = new NodeContent(); @State @Watch(\'changeNativeFlag\') showNative: boolean = false; changeNativeFlag(): void { if (this.showNative) { // 传递NodeContent对象用于Native创建组件的挂载显示 nativeNode.createNativeRoot(this.rootSlot) } else { // 销毁NativeModule组件 nativeNode.destroyNativeRoot() } } build() { Column() { Button(this.showNative ? \"HideNativeUI\" : \"ShowNativeUI\").onClick(() => { this.showNative = !this.showNative }) Row() { // 将NodeContent和ContentSlot占位组件绑定。 ContentSlot(this.rootSlot) }.layoutWeight(1) } .width(\'100%\') .height(\'100%\') }}

• 占位组件可以通过相关接口在Native侧转化为挂载对象。

ArkUI_NodeContentHandle contentHandle;OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &contentHandle);

• 挂载对象提供了相关挂载和卸载组件接口。

OH_ArkUI_NodeContent_AddNode(handle_, myNativeNode);OH_ArkUI_NodeContent_RemoveNode(handle_, myNativeNode);

NDK组件模块

NDK提供的UI组件能力如组件创建、树操作、属性设置、事件注册等是通过函数指针结构体(如 ArkUI_NativeNodeAPI_1 ）进行暴露，该函数指针结构体可以通过 模块查询接口 获取。

ArkUI_NativeNodeAPI_1* arkUINativeNodeApi = nullptr;OH_ArkUI_GetModuleInterface(ARKUI_NATIVE_NODE, ArkUI_NativeNodeAPI_1, arkUINativeNodeApi);

在获取到函数指针结构体后，可以使用该结构体内的函数实现相关UI组件操作。

• 组件创建和销毁。

auto listNode = arkUINativeNodeApi->createNode(ARKUI_NODE_LIST);arkUINativeNodeApi->disposeNode(listNode);

获取NDK接口支持的组件范围可以通过查询 ArkUI_NodeType 枚举值。

• 组件树操作。

auto parent = arkUINativeNodeApi->createNode(ARKUI_NODE_STACK);auto child = arkUINativeNodeApi->createNode(ARKUI_NODE_STACK);arkUINativeNodeApi->addChild(parent, child);arkUINativeNodeApi->removeChild(parent, child);

• 属性设置。

auto stack = arkUINativeNodeApi->createNode(ARKUI_NODE_STACK);ArkUI_NumberValue value[] = { {.f32 = 100}};ArkUI_AttributeItem item = {value, 1};arkUINativeNodeApi->setAttribute(stack, NODE_WIDTH, &item);ArkUI_NumberValue value[] = { {.u32 = 0xff112233}};ArkUI_AttributeItem item = {value, 1};arkUINativeNodeApi->setAttribute(stack, NODE_BACKGROUND_COLOR, &item);

获取NDK接口支持的属性范围可以通过查询 ArkUI_NodeAttributeType 枚举值。

• 事件注册。

auto stack = arkUINativeNodeApi->createNode(ARKU