文章目录组件简介核心能力核心API与参数1. 核心对象2. 通用属性IndicatorComponent3. 圆点指示器DotIndicator样式参数4. 数字指示器DigitIndicator样式参数5. 控制器方法使用场景与代码实现场景1圆点指示器 Swiper 绑定最常用场景2数字指示器 独立使用完整示例运行效果说明总结组件简介Indicator指示器是HarmonyOS ArkTS中用于配合轮播组件Swiper展示当前页面位置、分页状态的核心UI组件也可独立作为分页导航使用。核心作用直观展示当前页码/总页数支持点击切换、手动控制、样式自定义支持类型圆点指示器DotIndicator、数字指示器DigitIndicator适用场景轮播图分页、引导页导航、卡片滑动分页、多页面切换状态展示核心能力双向联动与Swiper组件绑定实现滑动/点击同步切换双样式支持圆点样式常规轮播、数字样式页码展示控制器控制支持上一页、下一页、跳转到指定页码高度自定义尺寸、颜色、字体、排列方向、最大显示数量均可配置循环切换支持无限轮播/非循环模式事件监听页码切换回调实时获取当前索引核心API与参数1. 核心对象对象名称作用IndicatorComponent指示器根组件承载圆点/数字样式IndicatorComponentController指示器控制器用于绑定Swiper、手动控制切换DotIndicator圆点指示器样式配置类DigitIndicator数字指示器样式配置类2. 通用属性IndicatorComponent属性类型说明默认值countnumber总页数必填-initialIndexnumber初始选中索引0verticalboolean排列方向true-纵向false-横向falseloopboolean是否循环切换truestyleDotIndicator/DigitIndicator指示器样式配置-onChange(index: number) void页码切换回调-3. 圆点指示器DotIndicator样式参数属性类型说明itemWidthnumber未选中圆点宽度itemHeightnumber未选中圆点高度selectedItemWidthnumber选中圆点宽度selectedItemHeightnumber选中圆点高度colorResourceColor未选中圆点颜色selectedColorResourceColor选中圆点颜色maxDisplayCountnumber最大显示圆点数量4. 数字指示器DigitIndicator样式参数属性类型说明fontColorResourceColor未选中文字颜色selectedFontColorResourceColor选中文字颜色digitFontFont未选中字体配置selectedDigitFontFont选中字体配置5. 控制器方法方法作用showNext()切换到下一页showPrevious()切换到上一页changeIndex(index: number, useAnimation: boolean)跳转到指定索引支持开启动画使用场景与代码实现场景1圆点指示器 Swiper 绑定最常用实现轮播图与指示器双向联动支持自动轮播、自定义圆点样式、实时页码展示适用于首页轮播、广告轮播、引导页轮播场景2数字指示器 独立使用不依赖Swiper单独作为分页指示器支持按钮手动控制切换、跳转指定页适用于固定分页、步骤导航、页码展示完整示例/** * Indicator组件完整示例API 15 * 包含圆点指示器绑定Swiper、数字指示器单独使用、控制器手动控制 */EntryComponentstruct IndicatorAllDemo{build(){Column({space:40}){// 标题Text(Indicator组件完整示例).fontSize(30).fontWeight(FontWeight.Bold).width(100%).textAlign(TextAlign.Center).margin({top:20})// 模块1圆点指示器 与Swiper绑定使用核心场景DotIndicatorSwiper()// 模块2数字指示器 单独使用控制器手动控制DigitIndicatorSolo()}.width(100%).height(100%).backgroundColor(0xF5F5F5).padding(20)}}/** * 子组件1圆点指示器 Swiper绑定 * 实现Swiper与Indicator双向联动、样式自定义、自动轮播 */Componentstruct DotIndicatorSwiper{// 声明Indicator和Swiper控制器privateindicatorController:IndicatorComponentControllernewIndicatorComponentController();privateswiperController:SwiperControllernewSwiperController();// Swiper数据源6个页面StateprivateswiperList:number[][];// 记录当前选中索引StateprivatecurrentIndex:number0;// 页面即将显示时初始化数据aboutToAppear():void{for(leti1;i6;i){this.swiperList.push(i);}}build(){Column({space:20}){Text(圆点指示器 Swiper绑定).fontSize(24).fontWeight(FontWeight.Medium).width(100%)// Swiper轮播组件Swiper(this.swiperController){ForEach(this.swiperList,(item:number){Text(页面${item}).width(100%).height(200).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(36).borderRadius(12)},(item:number)item.toString())// 唯一key}.width(100%).cachedCount(2)// 预加载数量.index(0)// 初始索引.autoPlay(true)// 自动轮播.interval(3000)// 轮播间隔.duration(800)// 切换动画时长.loop(true)// 循环轮播.curve(Curve.EaseInOut)// 动画曲线.indicator(this.indicatorController)// 绑定Indicator控制器.onChange((index:number){// Swiper索引变化回调this.currentIndexindex;console.info(Swiper切换至${index});})// 圆点Indicator组件与Swiper绑定IndicatorComponent(this.indicatorController).style(newDotIndicator()// 圆点样式自定义.itemWidth(12)// 未选中圆点宽度.itemHeight(12)// 未选中圆点高度.selectedItemWidth(30)// 选中圆点宽度拉伸为椭圆.selectedItemHeight(12)// 选中圆点高度.color(Color.Gray)// 未选中颜色.selectedColor(0x1890FF)// 选中颜色华为蓝.maxDisplayCount(5)// 最大显示圆点数量).count(6)// 总数量与Swiper一致.vertical(false)// 横向排列.onChange((index:number){// Indicator索引变化回调this.currentIndexindex;console.info(Indicator切换至${index});})// 显示当前索引Text(当前选中第${this.currentIndex1}页).fontSize(18)}.width(100%)}}/** * 子组件2数字指示器 单独使用 * 演示无Swiper时的独立使用、控制器手动控制上一页/下一页/跳指定页 */Componentstruct DigitIndicatorSolo{// 声明Indicator控制器privateindicatorController:IndicatorComponentControllernewIndicatorComponentController();// 总页数privatetotalCount:number5;// 记录当前选中索引StateprivatecurrentIndex:number0;build(){Column({space:20}){Text(数字指示器 单独使用).fontSize(24).fontWeight(FontWeight.Medium).width(100%)// 数字Indicator组件单独使用IndicatorComponent(this.indicatorController).style(Indicator.digit()// 数字样式自定义.fontColor(Color.Grey)// 未选中文字颜色.selectedFontColor(0xE53935)// 选中文字颜色红色.digitFont({size:18,weight:FontWeight.Normal})// 未选中字体.selectedDigitFont({size:20,weight:FontWeight.Bold})// 选中字体).count(this.totalCount)// 总数量.initialIndex(0)// 初始索引.loop(true)// 开启循环.vertical(false)// 横向排列.onChange((index:number){// 索引变化回调this.currentIndexindex;console.info(数字Indicator切换至${index});}).width(100%).backgroundColor(0xFFFFFF).padding(10).borderRadius(8)// 控制器操作按钮组Row({space:20}){Button(上一页).onClick((){this.indicatorController.showPrevious();// 跳上一页})Button(跳至第3页).onClick((){// 跳指定页索引2从0开始开启动画this.indicatorController.changeIndex(2,true);})Button(下一页).onClick((){this.indicatorController.showNext();// 跳下一页})}.width(100%).justifyContent(FlexAlign.Center)// 显示当前索引Text(当前选中第${this.currentIndex1}页 / 共${this.totalCount}页).fontSize(18)}.width(100%)}}运行效果如图运行效果说明圆点指示器模块Swiper自动轮播3秒/页指示器同步切换未选中圆点灰色小圆选中圆点蓝色长条椭圆点击指示器可直接跳转对应页面实时展示当前页码数字指示器模块独立展示页码1/5 ~ 5/5支持「上一页/下一页/跳至第3页」手动控制选中页码加粗变红视觉区分明显支持循环切换总结HarmonyOS 6 ArkTSIndicator组件是轮播场景的标配组件具备易用性强、定制化高、兼容性好的特点。快速实现仅需几行代码即可完成SwiperIndicator联动灵活适配支持圆点/数字两种样式满足不同UI需求可控性强控制器支持全手动操作扩展能力强如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力