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