滚动条组件

2024-01-22 17:25 更新

滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。

说明

该组件从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

横向滚动条。

示例

  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. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号