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

Question

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

Answer 1

解决措施

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开发指导