基于NDK构建UI概述
===========

ArkUI开发框架提供了一系列[NDK接口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-development-overview)，能够在应用中使用C和C++代码构建UI界面，这些接口包括UI组件创建、UI树操作、属性设置和事件监听等。面向通用UI界面开发场景，建议使用ArkTS代码和ArkUI声明式开发框架。然而，如果需要实现以下一个或多个目标，那么ArkUI NDK接口就能派上用场：

*   需要使用UI组件树控制接口来动态创建和挂载UI组件，方便实现自身UI开发框架的系统桥接。
    
*   重复使用自己或其他开发者的C或C++UI库。
    

ArkUI NDK接口能力主要包括：

*   **布局**
    
    布局是UI的必要元素，定义了组件在界面中的大小位置。ArkUI NDK接口提供了线性布局、层叠布局、弹性布局、相对布局、滚动容器、轮播容器等。
    
*   **组件**
    
    组件是UI的必要元素，形成了在界面中的样子。包括系统组件和用户自定义布局绘制行为的组件。系统组件包括按钮、单选框、图片、文本等，可以使用ArkUI NDK提供的接口快速创建相应组件并设置属性和事件。针对UI组件的自定义能力包括了布局测算和绘制，用户可以通过这些自定义能力构建差异化UI组件。
    
*   **弹窗**
    
    弹窗是UI界面交互的重要元素。ArkUI NDK接口提供了自定义弹窗相关接口，可以自定义弹窗界面内容并调用相关弹窗接口展示弹窗。
    
*   **动画**
    
    动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验，ArkUI NDK提供了显式动画接口用于快速构建组件的属性动画、实现高效精致的动画效果。
    
*   **交互事件**
    
    交互事件是UI和用户交互的必要元素。ArkUI NDK接口提供了多种交互事件，除了触摸事件、鼠标事件、焦点事件等通用事件外，还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势事件进行组合的组合手势事件。
    

#### 整体架构

**图1** NDK接口和ArkTS声明式关系架构图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2e/v3/jKKSKGlLR0yFEeaoHG40rg/zh-cn_image_0000002625107773.png?HW-CC-KV=V1&HW-CC-Date=20260612T073315Z&HW-CC-Expire=86400&HW-CC-Sign=568B51440D60209DFBB81523509C94BBFF3D73B5E6F40B5077BE90E9D204FEEB)

**图2** 通过NDK接口创建的组件挂载示意图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/72/v3/HScTaofQR3aj5uBNhL4A1g/zh-cn_image_0000002594668256.png?HW-CC-KV=V1&HW-CC-Date=20260612T073315Z&HW-CC-Expire=86400&HW-CC-Sign=611B3CA02D12885ACF099C9DE81D2974ECB1B993BF7BB202721DF29A4D456542)

*   ArkTS声明式UI前端和NDK接口都是针对ArkUI底层实现的接口暴露，NDK接口相比于ArkTS声明式UI前端，除了剥离状态管理等声明式UI语法外，还精简了组件能力，将ArkUI组件核心功能通过C接口进行封装暴露。
    
*   NDK创建的UI组件需要通过ArkTS层的占位组件进行挂载显示，挂载后，NDK创建的组件和ArkTS创建的组件位于同一个UI树上，相关布局渲染和事件处理遵循相同规则。
    

#### 开发流程

使用NDK接口开发UI界面时，主要涉及如下开发过程。

| 任务 | 简介 |
| :-- | :-- |
| [NDK开发导读](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-development-overview) | 介绍NDK的适用场景与必备基础知识。 |
| NDK对接ArkTS | 介绍如何在Native侧[嵌入ArkTS组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-embed-arkts-components)，以及如何[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。 |
| 构建布局 | 介绍了如何在Native侧[使用布局组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-layout-container)、[设置通用布局属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-common-attribute-layout)。 |
| [使用导航类组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-navigation-query) | 介绍了如何在Native侧查询Navigation和页面路由状态信息。 |
| 使用列表与网格 | 介绍了如何在Native侧[使用列表](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-loading-long-list)、[使用瀑布流](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-waterflow)、[使用网格](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-grid)。 |
| 使用文本 | 介绍了如何在Native侧[使用Text组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-use-text-component)、[使用属性字符串](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-styled-string)、[输入框文本事件监听](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-textarea-event)。 |
| 媒体展示 | 介绍了如何在Native侧[显示图片（Image）](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-image-component)、[使用滑块视图容器 (Swiper)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-swiper)。 |
| [构建表单组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-build-form-components) | 介绍了如何使用NDK接口创建按钮、滑动条、开关、复选框和单选按钮等表单组件。 |
| [构建弹窗](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-build-pop-up-window) | 介绍了如何使用弹窗接口构建UI界面进行弹窗显示。 |
| 使用动画 | 介绍了如何在Native侧通过[动画概述](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-use-animation)了解接口能力，并参考[使用动画开发指导](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-use-animation-scene)添加动画。 |
| 使用选择类组件 | 介绍了如何在Native侧[使用滑动选择器 (Picker)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-picker)。 |
| [添加事件响应](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-add-event-response) | 介绍了如何在Native侧[添加事件监听](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-add-component-events)、[绑定基础输入事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-bind-input-events)、[绑定手势事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-bind-gesture-events)和[绑定拖拽事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-drag-event)。 |
| 使用自定义能力 | 介绍了如何在Native侧[构建自定义组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-build-custom-components)、使用[自定义绘制](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-user-defined-draw)。 |
| [通过自绘制接入无障碍](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-accessibility-xcomponent) | 介绍了自绘制机制接入的第三方UI框架平台，通过获取AccessibilityProvider如何对接系统无障碍。 |
| [通过EmbeddedComponent拉起EmbeddedUIExtensionAbility](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-embedded-component) | 介绍了如何在Native侧通过EmbeddedComponent拉起EmbeddedUIExtensionAbility。主要用于有进程隔离需求的模块化开发场景。 |
| [查询和操作NDK节点](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-node-query-operate) | 介绍了如何对NDK节点进行查询和操作。 |
| [NDK多实例场景开发](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-scope-task) | 介绍了如何在NDK多实例场景中保证接口调用的功能正常。 |
| [NDK多线程创建组件](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-build-on-multi-thread) | 介绍了如何使用NDK多线程接口创建UI组件。 |
| [构建渲染节点](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-embed-render-components) | 介绍了如何在Native侧构建渲染节点。 |

#### 注意事项

使用NDK接口开发UI界面时，需要保证相关UI接口调用在应用主线程上调用，避免多线程操作导致应用崩溃问题。