鸿蒙开发：自定义一个剪辑双滑块组件

@BuilderParam trackLayout?: (leftProgress: number, rightProgress: number, viewWidth: number) => void //自定义的轨道

//自定义轨道
        if (this.trackLayout != undefined) {
          this.trackLayout(this.leftProgress, this.rightProgress, this.viewWidth)
        } else {
          TrackView({
            leftProgress: this.leftProgress,
            rightProgress: this.rightProgress,
            viewWidth: this.viewWidth,
            trackAlignmentWidth: this.trackAlignmentWidth,
            trackSelectColor: this.trackSelectColor,
            trackNormalColor: this.trackNormalColor
          })
        }

//轨道视图，可以自行定义
  @Builder
  trackLayout(leftProgress: number, rightProgress: number, viewWidth: number) {
   
  }

if (this.trackBgLayout != undefined) {
            this.trackBgLayout()
          } else {
            Column().width("100%")
              .height("100%")
              .border(this.trackBgBorder)
          }

Column() {
        if (this.leftPointerLayout != undefined) {
          this.leftPointerLayout()
        } else {
          Divider()
            .strokeWidth(this.pointerLineWidth)
            .height(this.pointerLineHeight)
            .vertical(true)
            .lineCap(this.pointerLineCap)
            .color(this.pointerLineColor)
        }
      }
      .width(this.pointerWidth)
      .height(this.pointerHeight)
      .justifyContent(FlexAlign.Center)
      .borderRadius(this.leftPointerBorder)
      .backgroundColor(this.leftPointerBgColor)
      .margin({ left: this.trackMarginLeft })
      .onTouch((event) => {
        switch (event.type) {
          case TouchType.Down: //手指按下
            this.pointerLeftMargin = event.touches[0].x
            break;
          case TouchType.Move: //移动
            let rightMargin = this.viewWidth - this.trackMarginRight - Number(this.pointerWidth)
            let upData = event.touches[0].displayX
            let moveX = upData - this.viewMarginLeft
            let pointerValue = moveX - this.pointerLeftMargin
            if (pointerValue >= 0 && (pointerValue + Number(this.pointerWidth)) <= rightMargin) {
              //左边的View不能超过右边的距离
              this.trackMarginLeft = pointerValue
            }
            let percentage = this.trackMarginLeft / (this.viewWidth - Number(this.pointerWidth) * 2) //百分比
            let progress = Math.round(percentage * 100) //进度
            this.leftProgress = progress
            if (this.onLeftProgress != undefined) {
              this.onLeftProgress(progress)
            }
            break
          case TouchType.Up: //手指弹起
            if (this.onLeftEndProgress != undefined) {
              this.onLeftEndProgress(this.leftProgress)
            }
            break
        }
      })

TrackProgress({
  pointerWidth: 20,
  onLeftProgress: (progress: number) => {
    console.log("===左侧指针进度：" + progress)
  },
  onRightProgress: (progress: number) => {
    console.log("===右侧指针进度：" + progress)
  }
})

TrackProgress({
  pointerWidth: 20,
  onLeftProgress: (progress: number) => {
    console.log("===左侧指针进度：" + progress)
  },
  onRightProgress: (progress: number) => {
    console.log("===右侧指针进度：" + progress)
  }
})

TrackProgress({
  pointerWidth: 20,
  leftPointerBgColor: Color.Orange,
  rightPointerBgColor: Color.Orange,
  trackSelectColor: Color.Orange,
  trackBgBorder: { width: 1, color: Color.Orange, radius: 5 },
  onLeftProgress: (progress: number) => {
    console.log("===左侧指针进度：" + progress)
  },
  onRightProgress: (progress: number) => {
    console.log("===右侧指针进度：" + progress)
  }
})

TrackProgress({
  pointerWidth: 20,
  leftPointerLayout: this.pointerLayout,
  rightPointerLayout: this.pointerLayout,
  onLeftProgress: (progress: number) => {
    console.log("===左侧指针进度：" + progress)
  },
  onRightProgress: (progress: number) => {
    console.log("===右侧指针进度：" + progress)
  }
})

TrackProgress({
  pointerWidth: 20,
  trackLayout: this.trackLayout,
  trackBgLayout: this.trackBgLayout,
  onLeftProgress: (progress: number) => {
    console.log("===左侧指针进度：" + progress)
  },
  onRightProgress: (progress: number) => {
    console.log("===右侧指针进度：" + progress)
  }
})