本节演示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;
// Indicator组件的控制器，可以将此对象绑定至Indicator组件来控制翻页。
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
