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
相关问题
是否支持自定义装饰器
224浏览 • 1回复 待解决
自定义组件嵌套子组件
7321浏览 • 3回复 待解决
弹窗打开、关闭动画是否支持自定义
320浏览 • 1回复 待解决
华为手机是否支持自定义锁屏页面?
2324浏览 • 1回复 待解决
ArkTs如何自定义容器组件
963浏览 • 1回复 待解决
如何设置自定义组件height缺省
137浏览 • 1回复 待解决
js 自定义组件如何传递方法?
4220浏览 • 2回复 待解决
自定义组件中如何添加图片?
762浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
6654浏览 • 1回复 待解决
自定义组件如何导出、引入?
367浏览 • 1回复 待解决
是否可以自定义权限弹框文字
41浏览 • 0回复 待解决
自定义组件什么时候销毁
191浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
388浏览 • 1回复 待解决
JAVA卡片怎么用自定义组件
4418浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人