• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ArcScrollBar
2
3<!--Kit: ArkUI-->
4<!--Subsystem: ArkUI-->
5<!--Owner: @shengu_lancer; @yylong-->
6<!--Designer: @yylong-->
7<!--Tester: @liuzhenshuo-->
8<!--Adviser: @HelloCrease-->
9
10弧形滚动条组件ArcScrollBar，用于配合可滚动组件使用，如[ArcList](ts-container-arclist.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)、[Scroll](ts-container-scroll.md)、[WaterFlow](ts-container-waterflow.md)。
11
12>  **说明：**
13>
14>  - 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
15>  - ArcScrollBar不设置宽高时，采用父组件[布局约束](../js-apis-arkui-frameNode.md#layoutconstraint12)中的maxSize作为宽高。如果ArcScrollBar的父组件存在可滚动组件，如[ArcList](ts-container-arclist.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)、[Scroll](ts-container-scroll.md)、[WaterFlow](ts-container-waterflow.md)，建议设置ArcScrollBar宽高，否则ArcScrollBar的宽高可能为无穷大。
16
17
18## 子组件
19
20不包含子组件。
21
22## 接口
23
24ArcScrollBar(options: ArcScrollBarOptions)
25
26ArcScrollBar的构造函数。
27
28**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
29
30**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
31
32**参数：**
33
34| 参数名 | 类型 | 必填 | 说明 |
35| -------- | -------- | -------- | -------- |
36| options |  [ArcScrollBarOptions](#arcscrollbaroptions)| 是 | 滚动条组件参数。 |
37
38## ArcScrollBarOptions
39
40ArcScrollBar的构造函数参数。
41
42**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。
43
44**系统能力：** SystemCapability.ArkUI.ArkUI.Circle
45
46| 名称 | 类型 | 只读 | 可选 | 说明 |
47| -------- | -------- | -- | -------- | -------- |
48| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 否 | 可滚动组件的控制器，用于与可滚动组件进行绑定。 |
49| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 是 | 滚动条状态。<br/>默认值：BarState.Auto |
50
51>  **说明：**
52>
53> ArcScrollBar与可滚动组件需通过scroller进行绑定后方能实现联动，且ArcScrollBar与可滚动组件仅限于一对一的绑定方式。
54
55## 示例
56
57该示例通过ArcScrollBar与Scroll组件联动，设置了弧形外置滚动条。
58
59```ts
60import { ArcScrollBar } from '@kit.ArkUI';
61
62@Entry
63@Component
64struct ArcScrollBarExample {
65  private scroller: Scroller = new Scroller();
66  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
67
68  build() {
69    Stack({ alignContent: Alignment.Center }) {
70      Scroll(this.scroller) {
71        Flex({ direction: FlexDirection.Column }) {
72          ForEach(this.arr, (item: number) => {
73            Row() {
74              Text(item.toString())
75                .width('80%')
76                .height(60)
77                .backgroundColor('#3366CC')
78                .borderRadius(15)
79                .fontSize(16)
80                .textAlign(TextAlign.Center)
81                .margin({ top: 5 })
82            }
83          }, (item: number) => item.toString())
84        }.margin({ right: 15 })
85      }
86      .width('90%')
87      .scrollBar(BarState.Off)
88
89      ArcScrollBar({ scroller: this.scroller, state: BarState.Auto })
90    }
91    .width('100%')
92    .height('100%')
93  }
94}
95```
96
97![zh-cn_image_0000001232775585](figures/ArcScrollBar.PNG)