The new Indicator navigation point component in HarmonyOS API 15.

This section demonstrates the features and usage of the new Indicator navigation point component in HarmonyOS API 15.

Environment Used

DevEco Studio 5.0.5 Release

Overview of the Indicator Navigation Point Component

The Indicator navigation point component offers two styles of navigation points: dot navigation points and digit navigation points.

This component has been supported since API Version 15. It provides the existing capabilities of the Indicator in the original Swiper component as a standalone component for developers to use. Developers can display navigation points independently without relying on the Swiper component, or they can bind it with the Swiper component using the IndicatorComponentController.

When multiple navigation point components are bound to the same Swiper component, only the last navigation point component will successfully bind to the Swiper.

When a navigation point component is bound to multiple Swiper components, only the last Swiper component will successfully bind to the navigation point component.

Creating an Example to Display Navigation Points Independently Without the Swiper Component

Create a project named "ArkTSIndicator" to demonstrate displaying navigation points independently without relying on the Swiper component.

Modify Index.ets as follows:

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

  // Controller for the Indicator component, which can be bound to the Indicator component to control page flipping.
  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) // Sets the index of the current navigation point when it is first displayed.
        .style( // Optional navigation point indicator style.
          new DotIndicator()
            .itemWidth(25)
            .itemHeight(25)
            .selectedItemWidth(25)
            .selectedItemHeight(25)
            .color(Color.Gray)
            .selectedColor(Color.Blue))
        .loop(true) // Sets whether to enable looping.
        .count(6) // Sets the total number of navigation points.
        .vertical(false) // Sets whether it is a vertical slide.
        // This event is triggered when the index of the currently selected navigation point changes. The index of the currently selected navigation point can be obtained through the callback function.
        .onChange((index: number) => {
          console.log("current index: " + index );

          // Assign the index to the variable indicatorIndex.
          this.indicatorIndex = index;
        })
    }
    .height('100%')
    .width('100%')
  }
}

Runtime Effect

For a video demonstration, please visit Bilibili: https://www.bilibili.com/video/BV1AE76z5Ei8/

Code Explanation

In the above example, the IndicatorComponentController is the controller for the Indicator component, which can be bound to the Indicator component to control page flipping.

The interface IndicatorComponent(controller?: IndicatorComponentController) is the constructor for the standalone navigation point component and can be used to configure the controller of the component. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API Version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The property initialIndex(index: number) of the IndicatorComponent is used to set the index of the current navigation point when it is first displayed. If the set value is less than 0 or greater than or equal to the number of navigation points, it will be treated as the default value 0. This property does not take effect when the standalone navigation point component is bound to the Swiper. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The property style(indicatorStyle: DotIndicator | DigitIndicator) of the IndicatorComponent is used to set the optional navigation point indicator style. The optional navigation point indicator style can be either DotIndicator or DigitIndicator, where DotIndicator is the dot indicator style and DigitIndicator is the digit indicator style. The default type is DotIndicator. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The property loop(isLoop: boolean) of the IndicatorComponent is used to set whether to enable looping. This property does not take effect when the standalone navigation point component is bound to the Swiper. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The property count(totalCount: number) of the IndicatorComponent is used to set the total number of navigation points. When the standalone navigation point component is bound to the Swiper, the number of pages in the Swiper takes precedence. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The property vertical(isVertical: boolean) of the IndicatorComponent is used to set whether it is a vertical slide. This property does not take effect when the standalone navigation point component is bound to the Swiper. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The event onChange(event: Callback<number>) of the IndicatorComponent is triggered when the index of the currently selected navigation point changes. The index of the currently selected navigation point can be obtained through the callback function. The description is as follows:

Card Capability: Starting from API version 15, this interface supports use in ArkTS cards.
Atomic Service API: Starting from API version 15, this interface supports use in atomic services.
System Capability: SystemCapability.ArkUI.ArkUI.Full

The currently selected navigation point index will copy the index value of the currently selected navigation point to the variable indicatorIndex, which is then displayed in the Text component above.