1# ScrollBar 2 3滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含单个子组件。 13 14 15## 接口 16 17ScrollBar(value: ScrollBarOptions) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| -------- | -------- | -------- | -------- | 23| value | [ScrollBarOptions](#scrollbaroptions对象说明)| 是 | 滚动条组件参数。 | 24 25## ScrollBarOptions对象说明 26 27| 参数名 | 参数类型 | 必填 | 参数描述 | 28| -------- | -------- | -------- | -------- | 29| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | 30| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical | 31| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值：BarState.Auto | 32 33> **说明：** 34> 35> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 36> 37> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 38 39## ScrollBarDirection枚举说明 40 41| 名称 | 描述 | 42| -------- | -------- | 43| Vertical | 纵向滚动条。 | 44| Horizontal | 横向滚动条。 | 45 46 47## 示例 48 49```ts 50// xxx.ets 51@Entry 52@Component 53struct ScrollBarExample { 54 private scroller: Scroller = new Scroller() 55 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 56 57 build() { 58 Column() { 59 Stack({ alignContent: Alignment.End }) { 60 Scroll(this.scroller) { 61 Flex({ direction: FlexDirection.Column }) { 62 ForEach(this.arr, (item: number) => { 63 Row() { 64 Text(item.toString()) 65 .width('80%') 66 .height(60) 67 .backgroundColor('#3366CC') 68 .borderRadius(15) 69 .fontSize(16) 70 .textAlign(TextAlign.Center) 71 .margin({ top: 5 }) 72 } 73 }, (item:number) => item.toString()) 74 }.margin({ right: 15 }) 75 } 76 .width('90%') 77 .scrollBar(BarState.Off) 78 .scrollable(ScrollDirection.Vertical) 79 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { 80 Text() 81 .width(20) 82 .height(100) 83 .borderRadius(10) 84 .backgroundColor('#C0C0C0') 85 }.width(20).backgroundColor('#ededed') 86 } 87 } 88 } 89} 90``` 91 92 93 94
