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**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| -------- | -------- | -------- | -------- | 27| value | [ScrollBarOptions](#scrollbaroptions对象说明)| 是 | 滚动条组件参数。 | 28 29## ScrollBarOptions对象说明 30 31**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35| 名称 | 类型 | 必填 | 说明 | 36| -------- | -------- | -------- | -------- | 37| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | 38| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical | 39| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值：BarState.Auto | 40 41> **说明：** 42> 43> ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。 44> 45> 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。 46> 47> 从API version 12开始，ScrollBar组件没有子节点时，支持显示默认样式的滚动条。 48 49## ScrollBarDirection枚举说明 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55| 名称 | 说明 | 56| -------- | -------- | 57| Vertical | 纵向滚动条。 | 58| Horizontal | 横向滚动条。 | 59 60 61## 示例1 62 63该示例为ScrollBar组件有子节点时的滚动条样式。 64 65```ts 66// xxx.ets 67@Entry 68@Component 69struct ScrollBarExample { 70 private scroller: Scroller = new Scroller() 71 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 72 73 build() { 74 Column() { 75 Stack({ alignContent: Alignment.End }) { 76 Scroll(this.scroller) { 77 Flex({ direction: FlexDirection.Column }) { 78 ForEach(this.arr, (item: number) => { 79 Row() { 80 Text(item.toString()) 81 .width('80%') 82 .height(60) 83 .backgroundColor('#3366CC') 84 .borderRadius(15) 85 .fontSize(16) 86 .textAlign(TextAlign.Center) 87 .margin({ top: 5 }) 88 } 89 }, (item:number) => item.toString()) 90 }.margin({ right: 15 }) 91 } 92 .width('90%') 93 .scrollBar(BarState.Off) 94 .scrollable(ScrollDirection.Vertical) 95 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) { 96 Text() 97 .width(20) 98 .height(100) 99 .borderRadius(10) 100 .backgroundColor('#C0C0C0') 101 }.width(20).backgroundColor('#ededed') 102 } 103 } 104 } 105} 106``` 107 108 109 110 111## 示例2 112 113该示例为ScrollBar组件没有子节点时的滚动条样式。 114 115```ts 116@Entry 117@Component 118struct ScrollBarExample { 119 private scroller: Scroller = new Scroller() 120 private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 121 122 build() { 123 Column() { 124 Stack({ alignContent: Alignment.End }) { 125 Scroll(this.scroller) { 126 Flex({ direction: FlexDirection.Column }) { 127 ForEach(this.arr, (item: number) => { 128 Row() { 129 Text(item.toString()) 130 .width('80%') 131 .height(60) 132 .backgroundColor('#3366CC') 133 .borderRadius(15) 134 .fontSize(16) 135 .textAlign(TextAlign.Center) 136 .margin({ top: 5 }) 137 } 138 }, (item:number) => item.toString()) 139 }.margin({ right: 15 }) 140 } 141 .width('90%') 142 .scrollBar(BarState.Off) 143 .scrollable(ScrollDirection.Vertical) 144 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) 145 } 146 } 147 } 148} 149``` 150 151 152 153
