• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Indicator
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @Hu_ZeQi-->
5<!--Designer: @jiangdayuan-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9导航点组件，提供圆点导航点以及数字导航点两种导航点样式。
10
11将原[Swiper](ts-container-swiper.md)组件中的[Indicator](ts-container-swiper.md#indicator)已有的能力作为一个单独组件提供给开发者使用。开发者可以不依赖Swiper组件单独显示导航点，也可以通过IndicatorComponentController与Swiper组件绑定使用。
12
13当多个导航点组件和同一个Swiper绑定时，只有最后一个导航点组件能成功和Swiper绑定。
14
15当一个导航点组件和多个Swiper绑定时，只有最后一个Swiper能成功和导航点组件绑定。
16
17>  **说明：**
18>
19> 该组件从API version 15开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
20
21
22## 子组件
23
24不包含子组件。
25
26## 接口
27
28IndicatorComponent(controller?: IndicatorComponentController)
29
30单独导航点组件的构造函数，可配置该组件的控制器。
31
32**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
33
34**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
35
36**系统能力：** SystemCapability.ArkUI.ArkUI.Full
37
38**参数：**
39
40|参数名|类型|必填|说明|
41| ----- | ----- | -- |  --- |
42| controller |  [IndicatorComponentController](#indicatorcomponentcontroller) | 否 | 设置控制器，可通过该参数控制单独导航点进行导航点之间的跳转。 |
43
44## 属性
45
46除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性。
47
48### style
49
50style(indicatorStyle: DotIndicator | DigitIndicator)
51
52设置可选导航点指示器样式。
53
54**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
55
56**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
57
58**系统能力：** SystemCapability.ArkUI.ArkUI.Full
59
60**参数：**
61
62| 参数名 | 类型                                                         | 必填 | 说明                                                         |
63| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
64| indicatorStyle  | [DotIndicator](ts-container-swiper.md#dotindicator10)&nbsp;\|&nbsp;[DigitIndicator](ts-container-swiper.md#digitindicator10)&nbsp;| 是   | 可选导航点指示器样式。<br/> \- DotIndicator：圆点指示器样式。<br/> \- DigitIndicator：数字指示器样式。<br/>&nbsp;&nbsp;默认类型：DotIndicator。 |
65
66> **说明：**
67>
68> 当indicatorStyle的类型为DotIndicator时，[maxDisplayCount](ts-container-swiper.md#maxdisplaycount12)不生效。
69
70### count
71
72count(totalCount: number)
73
74设置导航点总数量。
75
76单独导航点组件和Swiper绑定的时候，以Swiper的页面数量为准。
77
78**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
79
80**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
81
82**系统能力：** SystemCapability.ArkUI.ArkUI.Full
83
84**参数：**
85
86| 参数名 | 类型   | 必填 | 说明                                             |
87| ------ | ------ | ---- | ------------------------------------------------ |
88| totalCount  | number | 是   |  导航点总数量。<br/>默认值：2。 |
89
90### initialIndex
91
92initialIndex(index: number)
93
94设置首次显示时当前导航点的索引值。设置小于0或大于等于导航点数量时，按照默认值0处理。
95
96单独导航点组件和Swiper绑定的时候，该属性不生效。
97
98**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
99
100**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
101
102**系统能力：** SystemCapability.ArkUI.ArkUI.Full
103
104**参数：**
105
106| 参数名 | 类型   | 必填 | 说明                                             |
107| ------ | ------ | ---- | ------------------------------------------------ |
108| index  | number | 是   | 首次显示时当前导航点的索引值。<br/>默认值：0。 |
109
110### loop
111
112loop(isLoop: boolean)
113
114设置是否开启循环。
115
116单独导航点组件和Swiper绑定的时候，该属性不生效。
117
118**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
119
120**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
121
122**系统能力：** SystemCapability.ArkUI.ArkUI.Full
123
124**参数：**
125
126| 参数名 | 类型    | 必填 | 说明                            |
127| ------ | ------- | ---- | ------------------------------- |
128| isLoop  | boolean | 是   | 是否开启循环。true为开启循环，false为不开启循环。<br/>默认值：true。 |
129
130### vertical
131
132vertical(isVertical: boolean)
133
134设置是否为纵向滑动。
135
136单独导航点组件和Swiper绑定的时候，该属性不生效。
137
138**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
139
140**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
141
142**系统能力：** SystemCapability.ArkUI.ArkUI.Full
143
144**参数：**
145
146| 参数名 | 类型    | 必填 | 说明                               |
147| ------ | ------- | ---- | ---------------------------------- |
148| isVertical  | boolean | 是   | 是否为纵向滑动。true为纵向滑动，false为横向滑动。<br/>默认值：false |
149
150## 事件
151
152除支持[通用事件](ts-component-general-events.md)外，还支持以下事件：
153
154### onChange
155
156onChange(event: Callback\<number>)
157
158当前显示的选中导航点索引变化时触发该事件，可通过回调函数获取当前选中导航点的索引值。
159
160**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
161
162**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
163
164**系统能力：** SystemCapability.ArkUI.ArkUI.Full
165
166**参数：**
167
168| 参数名 | 类型   | 必填 | 说明                 |
169| ------ | ------ | ---- | -------------------- |
170| event  | [Callback](./ts-types.md#callback12)\<number> | 是   | 当前显示元素的索引变化时触发的回调。|
171
172## IndicatorComponentController
173
174Indicator组件的控制器，可以将此对象绑定至Indicator组件来控制翻页。
175
176### constructor
177
178constructor()
179
180IndicatorComponentController的构造函数。
181
182**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
183
184**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
185
186**系统能力：** SystemCapability.ArkUI.ArkUI.Full
187
188### showNext
189
190showNext(): void
191
192跳转到下一导航点。
193
194**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
195
196**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
197
198**系统能力：** SystemCapability.ArkUI.ArkUI.Full
199
200### showPrevious
201
202showPrevious(): void
203
204跳转到上一导航点。
205
206**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
207
208**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
209
210**系统能力：** SystemCapability.ArkUI.ArkUI.Full
211
212### changeIndex
213
214changeIndex(index: number, useAnimation?: boolean): void
215
216翻至指定导航点。
217
218**卡片能力：** 从API version 15开始，该接口支持在ArkTS卡片中使用。
219
220**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。
221
222**系统能力：** SystemCapability.ArkUI.ArkUI.Full
223
224**参数：**
225
226| 参数名      | 类型       | 必填  | 说明     |
227| -------- | ---------- | ---- | -------- |
228| index| number | 是    | 指定导航点在Swiper中的索引值。<br/>**说明：** <br/>设置的值小于0或大于最大导航点索引时，取0。 |
229| useAnimation| boolean | 否    | 设置翻至指定导航点时是否有动效，true表示有动效，false表示没有动效。<br/>默认值：false。 |
230
231## 示例
232
233### 示例1（圆点单独导航点与Swiper绑定使用）
234该示例通过Swiper组件的indicator接口与IndicatorComponent的构造函数绑定同一IndicatorComponentController对象，实现了圆点单独导航点与Swiper的交互。
235```
236@Entry
237@Component
238struct DotIndicatorDemo {
239  private indicatorController: IndicatorComponentController = new IndicatorComponentController();
240  private swiperController: SwiperController = new SwiperController();
241  @State list: number[] = [];
242  aboutToAppear(): void {
243    for (let i = 1; i <= 6; i++) {
244      this.list.push(i);
245    }
246  }
247
248  build() {
249    Column() {
250      Swiper(this.swiperController) {
251        ForEach(this.list, (item: string) => {
252          Text(item.toString())
253            .width('100%')
254            .height(160)
255            .backgroundColor(0xAFEEEE)
256            .textAlign(TextAlign.Center)
257            .fontSize(30)
258        }, (item: string) => item)
259      }
260      .cachedCount(2)
261      .index(0)
262      .autoPlay(true)
263      .interval(2000)
264      .indicator(this.indicatorController)
265      .loop(true)
266      .duration(1000)
267      .itemSpace(0)
268      .curve(Curve.Linear)
269      .onChange((index: number) => {
270        console.info(index.toString());
271      })
272
273      IndicatorComponent(this.indicatorController)
274        .initialIndex(0)
275        .style(
276          new DotIndicator()
277            .itemWidth(15)
278            .itemHeight(15)
279            .selectedItemWidth(15)
280            .selectedItemHeight(15)
281            .color(Color.Gray)
282            .selectedColor(Color.Blue))
283        .loop(true)
284        .count(6)
285        .vertical(true)
286        .onChange((index: number) => {
287          console.info("current index: " + index );
288        })
289    }
290  }
291}
292```
293![bindIndicatorDotStyle](figures/bindIndicatorDotStyle.gif)
294
295### 示例2（数字单独导航点与Swiper绑定使用）
296
297该示例通过Swiper组件的indicator接口与IndicatorComponent的构造函数绑定同一IndicatorComponentController对象，实现了数字单独导航点与Swiper的交互。
298
299```
300@Entry
301@Component
302struct DigitIndicatorDemo {
303  private indicatorController: IndicatorComponentController = new IndicatorComponentController();
304  private swiperController: SwiperController = new SwiperController();
305  @State list: number[] = [];
306  aboutToAppear(): void {
307    for (let i = 1; i <= 6; i++) {
308      this.list.push(i);
309    }
310  }
311
312  build() {
313    Column() {
314      Swiper(this.swiperController) {
315        ForEach(this.list, (item: string) => {
316          Text(item.toString())
317            .width('100%')
318            .height(160)
319            .backgroundColor(0xAFEEEE)
320            .textAlign(TextAlign.Center)
321            .fontSize(30)
322        }, (item: string) => item)
323      }
324      .cachedCount(2)
325      .index(0)
326      .autoPlay(true)
327      .interval(2000)
328      .indicator(this.indicatorController)
329      .loop(true)
330      .duration(1000)
331      .itemSpace(0)
332      .curve(Curve.Linear)
333      .onChange((index: number) => {
334        console.info(index.toString());
335      })
336
337      IndicatorComponent(this.indicatorController)
338        .initialIndex(0)
339        .style(Indicator.digit()
340          .fontColor(Color.Gray)
341          .selectedFontColor(Color.Gray)
342          .digitFont({ size: 20, weight: FontWeight.Bold })
343          .selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
344        .loop(true)
345        .count(6)
346        .vertical(true)
347        .onChange((index: number) => {
348          console.info("current index: " + index );
349        })
350    }
351  }
352}
353```
354
355![bindIndicatorDigitStyle](figures/bindIndicatorDigitStyle.gif)
356