使用滑块视图容器 (Swiper)
=================

#### 概述

ArkUI开发框架支持在NDK接口使用滑块视图容器Swiper，提供子组件滑动轮播显示的能力。本文介绍NDK接口的开发指导，ArkTS指南请参考[创建轮播 (Swiper)](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-create-looping)。

使用NDK接口构建UI界面以及NDK基本使用，可以参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。页面构建完成[创建Swiper](#创建swiper)后，可以通过[设置常用属性](#设置常用属性)和[设置导航指示器](#设置导航指示器)优化页面显示效果，页面切换时可以通过[监听事件](#监听事件)获取页面切换信息。

#### 创建Swiper

本示例通过调用[createNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativenodeapi-1#createnode)创建ARKUI\_NODE\_SWIPER类型的UI组件节点，用于后续设置属性等操作。并通过[addChild](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativenodeapi-1#addchild)在Swiper组件下挂载了多个Text文本组件，作为内容显示。

本示例仅展示核心功能代码，完整示例请参考工程[NDKSwiperSample](https://gitcode.com/HarmonyOS_Samples/guide-snippets/tree/master/ArkUISample/NDKSwiperSample)。

ArkUI\_NativeNodeAPI\_1 \*nodeApi = nullptr;
OH\_ArkUI\_GetModuleInterface(ARKUI\_NATIVE\_NODE, ArkUI\_NativeNodeAPI\_1, nodeApi);
ArkUI\_NodeHandle swiper = nodeApi->createNode(ARKUI\_NODE\_SWIPER);
AddChild(swiper, nodeApi);

#### 设置常用属性

本示例通过设置[ArkUI\_NodeAttributeType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeattributetype)中的属性调整页面显示效果，常见的属性如下：

| 枚举项 | 描述 |
| :-- | :-- |
| NODE\_HEIGHT\_PERCENT | 组件高度百分比。 |
| NODE\_WIDTH\_PERCENT | 组件宽度百分比 |
| NODE\_SWIPER\_PREV\_MARGIN | 前边距大小，当前可见项前一个子项显示在视窗内的大小。 |
| NODE\_SWIPER\_NEXT\_MARGIN | 后边距大小，当前可见项后一个子项显示在视窗内的大小。 |
| NODE\_SWIPER\_ITEM\_SPACE | 子项之间的显示间距。 |
| NODE\_SWIPER\_AUTO\_PLAY | 是否开启自动轮播。 |

本示例仅展示核心功能代码，完整示例请参考工程[NDKSwiperSample](https://gitcode.com/HarmonyOS_Samples/guide-snippets/tree/master/ArkUISample/NDKSwiperSample)。

// 设置常用属性
ArkUI\_NumberValue value\[\] = {0};
ArkUI\_AttributeItem item = {.value = value, .size = 1};
value\[0\].f32 = SWIPER\_HEIGHT\_PERCENT;
nodeApi->setAttribute(swiper, NODE\_HEIGHT\_PERCENT, &item);
value\[0\].f32 = SWIPER\_WIDTH\_PERCENT;
nodeApi->setAttribute(swiper, NODE\_WIDTH\_PERCENT, &item);

value\[0\].f32 = PREV\_AND\_NEXT\_MARGIN;
nodeApi->setAttribute(swiper, NODE\_SWIPER\_PREV\_MARGIN, &item);
nodeApi->setAttribute(swiper, NODE\_SWIPER\_NEXT\_MARGIN, &item);
value\[0\].f32 = ITEM\_SPACE;
nodeApi->setAttribute(swiper, NODE\_SWIPER\_ITEM\_SPACE, &item);
value\[0\].i32 = 1;
nodeApi->setAttribute(swiper, NODE\_SWIPER\_AUTO\_PLAY, &item);

#### 设置导航指示器

本示例通过[OH\_ArkUI\_SwiperIndicator\_Create](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-type-h#oh_arkui_swiperindicator_create)(ARKUI\_SWIPER\_INDICATOR\_TYPE\_DOT)创建圆点类型的导航指示器，并通过[OH\_ArkUI\_SwiperIndicator\_SetEndPosition](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-type-h#oh_arkui_swiperindicator_setendposition)、[OH\_ArkUI\_SwiperIndicator\_SetSelectedColor](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-type-h#oh_arkui_swiperindicator_setselectedcolor)接口分别设置导航指示器距离Swiper组件右边的距离和选中圆点的颜色。

本示例仅展示核心功能代码，完整示例请参考工程[NDKSwiperSample](https://gitcode.com/HarmonyOS_Samples/guide-snippets/tree/master/ArkUISample/NDKSwiperSample)。

// 设置导航导航指示器属性
ArkUI\_SwiperIndicator \*swiperIndicatorStyle = OH\_ArkUI\_SwiperIndicator\_Create(ARKUI\_SWIPER\_INDICATOR\_TYPE\_DOT);
OH\_ArkUI\_SwiperIndicator\_SetEndPosition(swiperIndicatorStyle, 0);
OH\_ArkUI\_SwiperIndicator\_SetSelectedColor(swiperIndicatorStyle, INDICATOR\_COLOR\_SELECTED);

ArkUI\_NumberValue value\[\] = {0};
ArkUI\_AttributeItem item = {.value = value, .size = 1, .object = swiperIndicatorStyle};
value\[0\].i32 = ARKUI\_SWIPER\_INDICATOR\_TYPE\_DOT;
nodeApi->setAttribute(swiper, NODE\_SWIPER\_INDICATOR, &item);

OH\_ArkUI\_SwiperIndicator\_Dispose(swiperIndicatorStyle);

显示效果如下图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/be/v3/l80hl2zLTeqvs8XBihIm7Q/zh-cn_image_0000002625107783.jpg?HW-CC-KV=V1&HW-CC-Date=20260612T073316Z&HW-CC-Expire=86400&HW-CC-Sign=BC34DA0BA0EE8CC03452A758F4E5384045497508AB36873AA6F3056D26FF7D2B)

#### 监听事件

本示例通过[registerNodeEvent](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativenodeapi-1#registernodeevent)注册Swiper组件的对应支持的事件类型[ArkUI\_NodeEventType](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-node-h#arkui_nodeeventtype)，开发者可以通过[registerNodeEventReceiver](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativenodeapi-1#registernodeeventreceiver)注册的监听回调中，判断回调类型并解析对应的回调内容。涉及的回调如下：

| 枚举项 | 描述 |
| :-- | :-- |
| NODE\_SWIPER\_EVENT\_ON\_CHANGE | 页面索引切换后显示的页面索引。 |
| NODE\_SWIPER\_EVENT\_ON\_ANIMATION\_START | 页面切换动画开始时，当前显示的页面索引和动画结束时切换到的页面索引。 |

本示例仅展示核心功能代码，完整示例请参考工程[NDKSwiperSample](https://gitcode.com/HarmonyOS_Samples/guide-snippets/tree/master/ArkUISample/NDKSwiperSample)。

// 注册翻页事件监听
nodeApi->registerNodeEvent(swiper, NODE\_SWIPER\_EVENT\_ON\_CHANGE, 0, nullptr);
nodeApi->registerNodeEvent(swiper, NODE\_SWIPER\_EVENT\_ON\_ANIMATION\_START, 1, nullptr);
nodeApi->registerNodeEventReceiver(\[\](ArkUI\_NodeEvent \*event) {
    ArkUI\_NodeEventType eventType = OH\_ArkUI\_NodeEvent\_GetEventType(event);
    if (eventType == NODE\_SWIPER\_EVENT\_ON\_CHANGE) {
        auto componentEvent = OH\_ArkUI\_NodeEvent\_GetNodeComponentEvent(event);
        if (componentEvent) {
            auto index = componentEvent->data\[0\].i32;
            OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "NDKSwiper",
                         "NODE\_SWIPER\_EVENT\_ON\_CHANGE index = %{public}d", index);
        }
    }
    if (eventType == NODE\_SWIPER\_EVENT\_ON\_ANIMATION\_START) {
        auto componentEvent = OH\_ArkUI\_NodeEvent\_GetNodeComponentEvent(event);
        if (componentEvent) {
            auto currentIndex = componentEvent->data\[0\].i32;
            auto targetIndex = componentEvent->data\[1\].i32;
            OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "NDKSwiper",
                         "NODE\_SWIPER\_EVENT\_ON\_ANIMATION\_START currentIndex = %{public}d, targetIndex = %{public}d",
                         currentIndex, targetIndex);
        }
    }
});