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