鴻蒙ArkTS聲明式組件：ScrollBar

ScrollBar

滾動條組件ScrollBar，用于配合可滾動組件使用，如List、Grid、Scroll。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

可以包含單個子組件。

接口

ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: BarState })

參數：

參數名	參數類型	必填	參數描述
scroller	[Scroller]	是	可滾動組件的控制器。用于與可滾動組件進行綁定。
direction	[ScrollBarDirection]	否	滾動條的方向，控制可滾動組件對應方向的滾動。默認值：ScrollBarDirection.Vertical
state	[BarState]	否	滾動條狀態。默認值：BarState.Auto

說明：
ScrollBar組件負責定義可滾動區域的行為樣式，ScrollBar的子節點負責定義滾動條的行為樣式。
滾動條組件與可滾動組件通過Scroller進行綁定，且只有當兩者方向相同時，才能聯動，ScrollBar與可滾動組件僅支持一對一綁定。

ScrollBarDirection枚舉說明

名稱	描述
Vertical	縱向滾動條。
Horizontal	橫向滾動條。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151547.png

示例

// xxx.ets
@Entry
@Component
struct ScrollBarExample {
  private scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Scroll(this.scroller) {
          Flex({ direction: FlexDirection.Column }) {
            ForEach(this.arr, (item: number) = > {
              Row() {
                Text(item.toString())
                  .width('80%')
                  .height(60)
                  .backgroundColor('#3366CC')
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 5 })
              }
            }, (item:number) = > item.toString())
          }.margin({ right: 15 })
        }
        .width('90%')
        .scrollBar(BarState.Off)
        .scrollable(ScrollDirection.Vertical)
        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
          Text()
            .width(20)
            .height(100)
            .borderRadius(10)
            .backgroundColor('#C0C0C0')
        }.width(20).backgroundColor('#ededed')
      }
    }
  }
}