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