Grid组件的scrollBar是否支持自定义

Grid组件的scrollBar是否支持自定义

HarmonyOS
2024-01-21 12:25:01
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
ssschangyu

Grid组件的默认滑动条scrollBar不支持自定义样式。

但是可以通过隐藏默认滑动条,并绑定一个ScrollBar组件,就满足该场景。

代码示例

@Entry 
@Component 
struct Index { 
  private scroller: Scroller = new Scroller() 
  private arr: number[] = []; 
 
  build() { 
    Column() { 
      Stack({ alignContent: Alignment.End }) { 
        Grid(this.scroller) { 
          ForEach(this.arr, (item: number) => { 
            GridItem() { 
              Text(item.toString()) 
                .width(100) 
                .height(50) 
                .backgroundColor('#3366CC') 
                .borderRadius(15) 
                .fontSize(16) 
                .textAlign(TextAlign.Center) 
            } 
          }) 
        } 
        .width('100%') 
        .columnsTemplate("1fr 1fr 1fr") 
        .columnsGap(5) 
        .rowsGap(5) 
        .scrollBar(BarState.Off) 
 
        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) { 
          Text("A") 
            .width(20) 
            .height(50) 
            .borderRadius(10) 
            .backgroundColor('#C0C0C0') 
        }.width(20).backgroundColor('#ededed') 
      } 
    } 
  } 
 
  aboutToAppear() { 
    for (let i = 0; i < 100; i++) { 
      this.arr.push(i) 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.

参考链接

Grid开发指导ScrollBar开发指导

分享
微博
QQ
微信
回复
2024-01-22 14:56:19
相关问题
HarmonyOS 组件是否支持自定义事件
789浏览 • 1回复 待解决
自定义组件是否支持renderFit属性
2540浏览 • 1回复 待解决
是否支持自定义装饰器
2821浏览 • 1回复 待解决
自定义Grid布局项间距异常
291浏览 • 0回复 待解决
HarmonyOS 是否支持自定义装饰器?
977浏览 • 1回复 待解决
HarmonyOS 是否支持自定义升级弹窗
663浏览 • 1回复 待解决
HarmonyOS ArkWeb是否支持自定义UserAgent
1166浏览 • 1回复 待解决
ArkTS是否支持自定义装饰器?
3497浏览 • 1回复 待解决
HarmonyOS ArkTS是否支持自定义注解
910浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
3289浏览 • 1回复 待解决
HarmonyOS 是否支持自定义内存分配器
1087浏览 • 1回复 待解决
希望Tabs页签位置是否支持自定义
1078浏览 • 1回复 待解决
HarmonyOS 定义自定义组件
1019浏览 • 1回复 待解决