创建弧形轮播 (ArcSwiper)（圆形屏幕推荐使用）
============================

ArcSwiper是弧形轮播组件，在圆形屏幕场景下使用，提供弧形轮播显示能力。具体用法请参考[ArcSwiper](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-arcswiper)。

在使用ArcSwiper组件之前，需要在代码中先导入ArcSwiper模块。

import {
  ArcSwiper,
  ArcSwiperAttribute,
  ArcDotIndicator,
  ArcDirection,
  ArcSwiperController
} from '@kit.ArkUI';

#### 设置导航点样式

ArcSwiper提供了默认的弧形导航点样式，导航点默认显示在ArcSwiper下方居中位置，开发者也可以通过[indicator](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-arcswiper#indicator)属性自定义弧形导航点的样式。

通过indicator属性，开发者可以设置弧形导航点的方向，同时也可以设置导航点和被选中导航点的颜色。

*   导航点使用默认样式
    
    ArcSwiper() {
      Text('0')
        .width(233)
        .height(233)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    
      Text('1')
        .width(233)
        .height(233)
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    
      Text('2')
        .width(233)
        .height(233)
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/29/v3/M4upz7qUTp2Ag5GwRLv7OQ/zh-cn_image_0000002594668044.png?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=84CFDCCB70D0EF5B875EC3A4FEEC0A91E592780DB637EEBADADC4098ABFD1E5C)
    
*   自定义导航点样式
    
    导航点位于ArcSwiper组件6点钟方向，导航点颜色设为红色，被选中导航点颜色为蓝色。
    
    ArcSwiper() {
      // ···
    }
    .indicator(
      new ArcDotIndicator()
        .arcDirection(ArcDirection.SIX\_CLOCK\_DIRECTION) // 设置导航点位于6点钟方向
        .itemColor(Color.Red) // 设置导航点颜色为红色
        .selectedItemColor(Color.Blue) // 设置选中导航点颜色为蓝色
    )
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/3a/v3/kxZ9FQbXTNyYHC3r9uxgyg/zh-cn_image_0000002594827972.png?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=EE8A25C279F4032A24F66EDE7A50D128DB38366AFBA42D876AF9A864385D036B)
    

#### 控制页面切换方式

ArcSwiper支持滑动手指、点击导航点、旋转表冠和控制控制器四种方式切换页面。以下示例展示通过控制控制器和旋转表冠翻页的方法。

*   控制控制器翻页。
    
    // 导入ArcButton和ArcSwiper模块
    import {
      ArcButton,
      ArcButtonOptions,
      ArcButtonStatus,
      ArcButtonStyleMode,
      ArcButtonPosition,
      ArcSwiper,
      ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。
      ArcSwiperController,
      // ...
    } from '@kit.ArkUI';
    // ...
    
    // 如需作为页面入口，请取消@Entry的注释并删除export关键字
    // @Entry
    @Component
    export struct ArcSwiperToggle {
      private wearableSwiperController: ArcSwiperController = new ArcSwiperController();
    
      build() {
        // ...
          Column({ space: 12 }) {
            // ...
              Stack() {
                ArcSwiper(
                  this.wearableSwiperController
                ) {
                  // ...
                }
                .vertical(true)
                .indicator(false)
    
                // ...
    
    
                Column() {
                  ArcButton({
                    options: new ArcButtonOptions({
                      label: 'previous',
                      position: ArcButtonPosition.TOP\_EDGE,
                      styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
                      onClick: () => {
                        this.wearableSwiperController.showPrevious(); // 通过controller切换到前一页
                      }
                    })
                  })
    
                  Blank()
    
                  ArcButton({
                    options: new ArcButtonOptions({
                      label: 'next',
                      position: ArcButtonPosition.BOTTOM\_EDGE,
                      styleMode: ArcButtonStyleMode.EMPHASIZED\_LIGHT,
                      onClick: () => {
                        this.wearableSwiperController.showNext(); // 通过controller切换到后一页
                      }
                    })
                  })
                }.width('100%').height('100%')
              }
              // ...
          }
          // ...
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2/v3/7bRboh1zTQexK53VVnXLkg/zh-cn_image_0000002625187419.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=5AA74903E0EC075E83F48CFF480AC85E1A2EDDD525FB9A6DF8140042AC7E0128)
    
*   旋转表冠翻页。
    
    ArcSwiper在获得焦点时能够响应旋转表冠的操作，用户可以通过旋转表冠来滑动ArcSwiper，从而浏览数据。
    
    ArcSwiper(
    // ···
    ) {
    // ···
    }
    // ···
    
    .focusable(true)
    .focusOnTouch(true)
    .defaultFocus(true)
    
    还可以通过设置[digitalCrownSensitivity](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-arcswiper#digitalcrownsensitivity)属性来调整表冠对事件响应的灵敏度，以适应不同规模的数据处理。在处理大量数据时，可以提高响应事件的灵敏度；而在处理少量数据时，则可以降低灵敏度设置。
    
    ArcSwiper(
    // ···
    ) {
    // ···
    }
    // ···
    
    .digitalCrownSensitivity(CrownSensitivity.MEDIUM)
    

#### 设置轮播方向

ArcSwiper支持水平和垂直方向上进行轮播，主要通过[vertical](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-arcswiper#vertical)属性控制。

当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。

*   设置水平方向上轮播。
    
    ArcSwiper() {
      // ···
    }
    .indicator(true)
    .vertical(false)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/36/v3/ZkuaOo32QiG093RZZ7Ms-A/zh-cn_image_0000002594668044.png?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=B4FAEB8A75300F08F193738D6055A420EBF846EC28B2A792850B74DF59C0B8DC)
    
*   设置垂直方向轮播，导航点设为3点钟方向。
    
    ArcSwiper() {
      // ···
    }
    .indicator(new ArcDotIndicator()
      .arcDirection(ArcDirection.THREE\_CLOCK\_DIRECTION))
    .vertical(true)
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a8/v3/pkOKSaTySnmS8s9Vex5k5Q/zh-cn_image_0000002625107563.png?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=583DB3BCCF1E17119669774B71E902B16044A81051DA582800E605C9F38A71F4)
    

#### 自定义切换动画

ArcSwiper支持通过[customContentTransition](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-arcswiper#customcontenttransition)设置自定义切换动画，可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性，从而实现自定义切换动画效果。

import { Decimal } from '@kit.ArkTS';
import {
  ArcSwiper,
  ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。
} from '@kit.ArkUI';
// ...

// 如需作为页面入口，请取消@Entry的注释并删除export关键字
// @Entry
@Component
export struct ArcSwiperAction {
  private MIN\_SCALE: number = 0.1;
  @State backgroundColors: Color\[\] = \[Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange\];
  @State opacityList: number\[\] = \[\];
  @State scaleList: number\[\] = \[\];

  aboutToAppear(): void {
    for (let i = 0; i < this.backgroundColors.length; i++) {
      this.opacityList.push(1.0);
      this.scaleList.push(1.0);
    }
  }

  build() {
    // ...
      Column({ space: 12 }) {
        // ...
          ArcSwiper() {
            ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => {
              Text(index.toString())
                .width(233)
                .height(233)
                .fontSize(50)
                .textAlign(TextAlign.Center)
                .backgroundColor(backgroundColor)
                .opacity(this.opacityList\[index\])
                .scale({ x: this.scaleList\[index\], y: this.scaleList\[index\] })
            })
          }
          .customContentTransition({
            timeout: 1000,
            transition: (proxy: SwiperContentTransitionProxy) => {
              if (proxy.position <= -1 || proxy.position >= 1) {
                // 页面完全滑出视窗外时，重置属性值
                this.opacityList\[proxy.index\] = 1.0;
                this.scaleList\[proxy.index\] = 1.0;
              } else {
                let position: number = Decimal.abs(proxy.position).toNumber();
                this.opacityList\[proxy.index\] = 1 - position;
                this.scaleList\[proxy.index\] =
                  this.MIN\_SCALE + (1 - this.MIN\_SCALE) \* (1 - position);
              }
            }
          })
          // ...
      }
      .width('100%')
      // ...
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9f/v3/Kyff1eNFTLerkGUVV9u7sQ/zh-cn_image_0000002594668046.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=9079EE3E7090FC40D76D6C0B00854529B51032BD87E11A9C8109AB7B9971C4A8)

#### 实现侧滑返回

ArcSwiper的滑动事件会与侧滑返回冲突，可以通过[onGestureRecognizerJudgeBegin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-gesture-blocking-enhancement#ongesturerecognizerjudgebegin)去判断ArcSwiper是否滑动到开头去拦截ArcSwiper的滑动手势，实现再次左滑返回上一页的功能。

import {
  ArcSwiper,
  ArcSwiperAttribute, // ArcSwiper的属性依赖ArcSwiperAttribute对象导入，不建议删除该对象的引入。
} from '@kit.ArkUI';
// ...

// 如需作为页面入口，请取消@Entry的注释并删除export关键字
// @Entry
@Component
export struct ArcSwiperSideSlip {
  @State backgroundColors: Color\[\] = \[Color.Green, Color.Blue, Color.Yellow, Color.Pink, Color.Gray, Color.Orange\];
  innerSelectedIndex: number = 0;

  build() {
    // ...
      Column({ space: 12 }) {
        // ...
          ArcSwiper() {
            ForEach(this.backgroundColors, (backgroundColor: Color, index: number) => {
              Text(index.toString())
                .width(233)
                .height(233)
                .fontSize(50)
                .textAlign(TextAlign.Center)
                .backgroundColor(backgroundColor)
            })
          }
          .onAnimationStart((index: number, targetIndex: number) => {
            this.innerSelectedIndex = targetIndex;
          })
          .onGestureRecognizerJudgeBegin((event: BaseGestureEvent, current: GestureRecognizer,
            others: Array<GestureRecognizer>): GestureJudgeResult => { // 在识别器即将要成功时，根据当前组件状态，设置识别器使能状态
            if (current) {
              let target = current.getEventTargetInfo();
              if (target && current.isBuiltIn() && current.getType() == GestureControl.GestureType.PAN\_GESTURE) {
                let swiperTarget = target as ScrollableTargetInfo;
                if (swiperTarget instanceof ScrollableTargetInfo &&
                  (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) { // 此处判断swiperTarget.isBegin()或innerSelectedIndex === 0，表明ArcSwiper滑动到开头
                  let panEvent = event as PanGestureEvent;
                  if (panEvent && panEvent.offsetX > 0 && (swiperTarget.isBegin() || this.innerSelectedIndex === 0)) {
                    return GestureJudgeResult.REJECT;
                  }
                }
              }
            }
            return GestureJudgeResult.CONTINUE;
          })
          // ...
      }
      .width('100%')
      // ...
  }
}

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/51/v3/KuAsKdItT-u0J1wOsGtfOg/zh-cn_image_0000002594827974.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073305Z&HW-CC-Expire=86400&HW-CC-Sign=81510DCE4DE93003A04A6BB425B298D3ED4C6DC21CF035469EA6F38D3D5D478F)