HarmonyOS 鸿蒙Next API 15 新晋导航点组件Indicator详解

HarmonyOS 鸿蒙Next API 15 新晋导航点组件Indicator详解

本节演示HarmonyOS API 15新晋导航点组件Indicator的特性及用法。

所使用的环境为：DevEco Studio 5.0.5 Release

导航点组件Indicator概述

导航点组件Indicator，提供圆点导航点以及数字导航点两种导航点样式。

该组件从API Version 15开始支持，将原Swiper组件中的Indicator已有的能力作为一个单独组件提供给开发者使用。开发者可以不依赖Swiper组件单独显示导航点，也可以通过IndicatorComponentController与Swiper组件绑定使用。

当多个导航点组件和同一个Swiper绑定时，只有最后一个导航点组件能成功和Swiper绑定。

当一个导航点组件和多个Swiper绑定时，只有最后一个Swiper能成功和导航点组件绑定。

创建一个不依赖Swiper组件单独显示导航点的示例

创建一个名为“ArkTSIndicator”的项目，用于演示不依赖Swiper组件单独显示导航点。

修改Index.ets，内容如下：

@Entry
@Component
struct Index {
  @State indicatorIndex: number = 0;

  private indicatorController: IndicatorComponentController = new IndicatorComponentController();

  build() {
    Column() {
      Text(this.indicatorIndex + '')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)

      IndicatorComponent(this.indicatorController)
        .initialIndex(0) // 设置首次显示时当前导航点的索引值。
        .style( // 可选导航点指示器样式。
          new DotIndicator()
            .itemWidth(25)
            .itemHeight(25)
            .selectedItemWidth(25)
            .selectedItemHeight(25)
            .color(Color.Gray)
            .selectedColor(Color.Blue))
        .loop(true) // 设置是否开启循环
        .count(6) // 设置导航点总数量
        .vertical(false) // 设置是否为纵向滑动
        // 当前显示的选中导航点索引变化时触发该事件，可通过回调函数获取当前选中导航点的索引值。
        .onChange((index: number) => {
          console.log("current index: " + index );

          // 索引赋值给变量indicatorIndex
          this.indicatorIndex = index;
        })
    }
    .height('100%')
    .width('100%')
  }
}

运行效果如下

视频演示效果，可见B站：https://www.bilibili.com/video/BV1AE76z5Ei8/

代码解读

在上述示例中，IndicatorComponentController是Indicator组件的控制器，可以将此对象绑定至Indicator组件来控制翻页。

接口IndicatorComponent(controller?: IndicatorComponentController)是单独导航点组件的构造函数，可配置该组件的控制器。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的属性initialIndex(index: number)是用于设置首次显示时当前导航点的索引值。设置小于0或大于等于导航点数量时，按照默认值0处理。单独导航点组件和Swiper绑定的时候，该属性不生效。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的属性style(indicatorStyle: DotIndicator | DigitIndicator)是用于设置可选导航点指示器样式。可选导航点指示器样式可以是 DotIndicator或者DigitIndicator，其中 DotIndicator是圆点指示器样式；DigitIndicator是数字指示器样式。默认类型是DotIndicator。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的属性loop(isLoop: boolean)是用于设置是否开启循环。单独导航点组件和Swiper绑定的时候，该属性不生效。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的属性count(totalCount: number)是用于设置导航点总数量。单独导航点组件和Swiper绑定的时候，以Swiper的页面数量为准。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的属性vertical(isVertical: boolean)是用于设置是否为纵向滑动。单独导航点组件和Swiper绑定的时候，该属性不生效。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

IndicatorComponent的事件onChange(event: Callback<number>)是用于当前显示的选中导航点索引变化时触发该事件，可通过回调函数获取当前选中导航点的索引值。描述如下：

• 卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
• 元服务API： 从API Version 15开始，该接口支持在元服务中使用。
• 系统能力： SystemCapability.ArkUI.ArkUI.Full

当前显示的选中导航点索，会将当前选中导航点的索引值复制给变量indicatorIndex，从而在上方的Text组件中展示出来。

源码

本示例源码归档至《跟老卫学HarmonyOS开发》：https://github.com/waylau/harmonyos-tutorial