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

Answer 2

滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
可以包含单个子组件但不支持自定义样式。
给一个相关代码：

// xxx.ets
@Entry
@Component
struct ScrollBarExample {
  private scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Scroll(this.scroller) {
          Flex({ direction: FlexDirection.Column }) {
            ForEach(this.arr, (item: number) => {
              Row() {
                Text(item.toString())
                  .width('80%')
                  .height(60)
                  .backgroundColor('#3366CC')
                  .borderRadius(15)
                  .fontSize(16)
                  .textAlign(TextAlign.Center)
                  .margin({ top: 5 })
              }
            }, (item:number) => item.toString())
          }.margin({ right: 15 })
        }
        .width('90%')
        .scrollBar(BarState.Off)
        .scrollable(ScrollDirection.Vertical)
        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.Auto }) {
          Text()
            .width(20)
            .height(100)
            .borderRadius(10)
            .backgroundColor('#C0C0C0')
        }.width(20).backgroundColor('#ededed')
      }
    }
  }
}

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。