滾動條組件

2024-01-22 17:25 更新

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

說明

該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

可以包含單個子組件。

接口

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

scroller

Scroller

可滾動組件的控制器。用于與可滾動組件進行綁定。

direction

ScrollBarDirection

滾動條的方向,控制可滾動組件對應方向的滾動。

默認值:ScrollBarDirection.Vertical

state

BarState

滾動條狀態(tài)。

默認值:BarState.Auto

說明

ScrollBar組件負責定義可滾動區(qū)域的行為樣式,ScrollBar的子節(jié)點負責定義滾動條的行為樣式。

滾動條組件與可滾動組件通過Scroller進行綁定,且只有當兩者方向相同時,才能聯(lián)動,ScrollBar與可滾動組件僅支持一對一綁定。

ScrollBarDirection枚舉說明

名稱

描述

Vertical

縱向滾動條。

Horizontal

橫向滾動條。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ScrollBarExample {
  5. private scroller: Scroller = new Scroller()
  6. private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
  7. build() {
  8. Column() {
  9. Stack({ alignContent: Alignment.End }) {
  10. Scroll(this.scroller) {
  11. Flex({ direction: FlexDirection.Column }) {
  12. ForEach(this.arr, (item) => {
  13. Row() {
  14. Text(item.toString())
  15. .width('80%')
  16. .height(60)
  17. .backgroundColor('#3366CC')
  18. .borderRadius(15)
  19. .fontSize(16)
  20. .textAlign(TextAlign.Center)
  21. .margin({ top: 5 })
  22. }
  23. }, item => item)
  24. }.margin({ right: 15 })
  25. }
  26. .width('90%')
  27. .scrollBar(BarState.Off)
  28. .scrollable(ScrollDirection.Vertical)
  29. ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
  30. Text()
  31. .width(20)
  32. .height(100)
  33. .borderRadius(10)
  34. .backgroundColor('#C0C0C0')
  35. }.width(20).backgroundColor('#ededed')
  36. }
  37. }
  38. }
  39. }

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號