最近鸿蒙原生开发工作需要，要将滚动条改成图片的，不用系统原本的样式

刚开始思考，哇，好像好难哦，自定义组件要和滚动类组件联动，该怎么处理呢？

这时候应该去查阅官方文档，然后发现了原来官方组件里有个ScrollBar，可以通过它来进行自定义，至于联动滚动方面，可以通过同一个scroller控制器关联来实现

效果图：

@Entry
@ComponentV2
struct Index {

  private scroller = new Scroller()

  build() {
    Column() {
      Stack({ alignContent: Alignment.End }) {
        Scroll(this.scroller) {
          Flex({ direction: FlexDirection.Column }) {
            ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], (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('100%')
        .scrollBar(BarState.Off)
        .scrollable(ScrollDirection.Vertical)

        ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical,state: BarState.On }) {
          Image($r('app.media.startIcon'))
            .aspectRatio(1)
            .width(20)
        }
        .width(20)
        .backgroundColor('#ededed')
      }
    }
  }
}

通过Stack将Scroll组件和ScrollBar堆叠起来，同时要将Scroll组件原本的滚动条隐藏起来。自定义滑块，通过在ScrollBar的子组件实现，例如这里的Image组件，就可以实现自定义图案的滑块了。

参考文献：
API 参考 ScrollBar
【HarmonyOS】滚动容器组件与自定义滚动条实践