ScrollBar

滾動(dòng)條組件ScrollBar，用于配合可滾動(dòng)組件使用，如List、Grid、Scroll。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含單個(gè)子組件。

接口

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

參數(shù)：

說(shuō)明：

ScrollBar組件負(fù)責(zé)定義可滾動(dòng)區(qū)域的行為樣式，ScrollBar的子節(jié)點(diǎn)負(fù)責(zé)定義滾動(dòng)條的行為樣式。

滾動(dòng)條組件與可滾動(dòng)組件通過(guò)Scroller進(jìn)行綁定，且只有當(dāng)兩者方向相同時(shí)，才能聯(lián)動(dòng)，ScrollBar與可滾動(dòng)組件僅支持一對(duì)一綁定。

ScrollBarDirection枚舉說(shuō)明

示例

// 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')
      }
    }
  }
}

審核編輯 黃宇