HarmonyOS-UIAbitity-ScrollBar——【坚果派-红目香薰】

红目香薰

发布于 2024-02-03 08:50:28

850

发布于 2024-02-03 08:50:28

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

示例代码

HarmonyOS-UIAbitity-ScrollBar

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

接口

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	横向滚动条。

示例代码

 @Entry
 @Component
 struct ScrollBarExample {
   private scroller: Scroller = new Scroller()
   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   build() {
     Column() {
       Stack({ alignContent: Alignment.End }) {
         Scroll(this.scroller) {
           Flex({ direction: FlexDirection.Column }) {
             ForEach(this.arr, (item) => {
               Row() {
                 Text(item.toString())
                   .width('90%')
                   .height(100)
                   .backgroundColor('#3366CC')
                   .borderRadius(15)
                   .fontSize(16)
                   .textAlign(TextAlign.Center)
                   .margin({ top: 5 })
               }
             }, item => item)
           }.margin({ left: 52 })
         }
         .scrollBar(BarState.Off)
         .scrollable(ScrollDirection.Vertical)
         ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
           Text()
             .width(30)
             .height(100)
             .borderRadius(10)
             .backgroundColor('#C0C0C0')
         }.width(30).backgroundColor('#ededed')
       }
     }
   }
 }

示例效果