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

参考链接

Grid开发指导ScrollBar开发指导

分享
微博
QQ
微信
回复
2024-01-22 14:56:19
相关问题
自定义组件是否支持renderFit属性
629浏览 • 1回复 待解决
是否支持自定义装饰器
868浏览 • 1回复 待解决
ArkTS是否支持自定义装饰器?
704浏览 • 1回复 待解决
弹窗打开、关闭动画是否支持自定义
788浏览 • 1回复 待解决
华为手机是否支持自定义锁屏页面?
2709浏览 • 1回复 待解决
自定义组件嵌套子组件
7993浏览 • 3回复 待解决
如何自定义模拟Tabs组件
396浏览 • 1回复 待解决
如何自定义组件原型菜单
452浏览 • 1回复 待解决
ArkTs如何自定义容器组件
1716浏览 • 1回复 待解决
自定义弹窗自定义转场动画
436浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
7286浏览 • 1回复 待解决
自定义组件如何导出、引入?
899浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人