目录

ArcScrollBar

The ArcScrollBar component is designed to be used together with scrollable components such as ArcList, List, Grid, Scroll, and WaterFlow.

  • This component is supported since API version 18. Updates will be marked with a superscript to indicate their earliest API version.
  • When the width and height of the ArcScrollBar component are not set, the maxSize value specified in its parent component LayoutConstraint is used as the width and height. If the parent component of the ArcScrollBar component contains scrollable components, such as ArcList, List, Grid, Scroll, or WaterFlow, you are advised to set the width and height of the ArcScrollBar component. Otherwise, the width and height of the component may be infinite.
  • This component can be used on phones, PCs, 2-in-1 devices, tablets, TVs, and wearables. In API version 22 and earlier versions, a compilation warning will be reported when this component is used on phones, PCs, 2-in-1 devices, tablets, and TVs, but the component can still run properly.

Child Components

Not supported

APIs

ArcScrollBar(options: ArcScrollBarOptions)

A constructor used to create an ArcScrollBar instance.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Circle

Parameters

Name Type Mandatory Description
options ArcScrollBarOptions Yes Parameters of the ArcScrollBar component.

ArcScrollBarOptions

Represents the parameters used to construct an ArcScrollBar component.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Circle

Name Type Read-Only Optional Description
scroller Scroller No No Scroller, which can be bound to scrollable components for scrolling control.
state BarState No Yes

State of the scrollbar.

Default value: BarState.Auto

ArcScrollBar must be bound to a scrollable component through scroller to achieve synchronization. Only a one-to-one binding is allowed between ArcScrollBar and a scrollable component.

Example

This example demonstrates how to synchronize ArcScrollBar with the Scroll component to implement an arc scrollbar.

import { ArcScrollBar } from '@kit.ArkUI';

@Entry
@Component
struct ArcScrollBarExample {
  private scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Stack({ alignContent: Alignment.Center }) {
      Scroll(this.scroller) {
        Flex({ direction: FlexDirection.Column }) {
          ForEach(this.arr, (item: number) => {
            Row() {
              Text(item.toString())
                .width('80%')
                .height(60)
                .backgroundColor('#3366CC')
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .margin({ top: 5 })
            }
          }, (item: number) => item.toString())
        }.margin({ right: 15 })
      }
      .width('90%')
      .scrollBar(BarState.Off)

      ArcScrollBar({ scroller: this.scroller, state: BarState.Auto })
    }
    .width('100%')
    .height('100%')
  }
}