HarmonyOS 鸿蒙Next 使用Canvas做一个类似进度条一样的图形，onReady能监听@state修饰的变量吗？

可以使用@Watch注解，使用@Watch的变量在变化后可以触发自己定义的方法，这样就不用触发onReady方法了

//SliderPage.ets
@Entry
@Component
struct SliderPage {

  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  @State [@Watch](/user/Watch)('redRateChange') redRate: number = 0.5
  @State leftText: string = "123"
  @State rightText: string = "456"
  redRateChange(){
    let h = this.context.height
    let w = this.context.width

    let left = new Path2D()
    left.arc(5, 5, 4, Math.PI / 2, Math.PI / 2 * 3)
    left.moveTo(5, 1)
    left.lineTo((w - 15) * this.redRate, 1)
    left.lineTo((w - 15) * this.redRate - 5, 9)
    left.lineTo(5, 9)
    left.closePath()
    this.context.fillStyle = "#ff6d5b"
    this.context.fill(left)
    let center = new Path2D()
    center.moveTo((w - 15) * this.redRate + 5, 1)
    center.lineTo((w - 15) * this.redRate + 10, 1)
    center.lineTo((w - 15) * this.redRate + 5, 9)
    center.lineTo((w - 15) * this.redRate, 9)
    this.context.fillStyle = "#000000"
    this.context.fill(center)

    let right = new Path2D()
    right.moveTo((w - 15) * this.redRate + 15, 1)
    right.lineTo(w - 5, 1)
    right.lineTo(w - 5, 9)
    right.lineTo((w - 15) * this.redRate + 10, 9)
    right.moveTo(w - 5, 5)
    right.arc(w - 5, 5, 4, Math.PI / 2 * 3, Math.PI / 2)

    this.context.fillStyle = "#77439d"
    this.context.fill(right)
  }

  build() {
    Column({ space: 24 }) {
      Row({ space: 4 }) {
        Text(this.leftText)

        Canvas(this.context)
          .height(10)
          .layoutWeight(1)
          .onReady(() => {
            let h = this.context.height
            let w = this.context.width

            let left = new Path2D()
            left.arc(5, 5, 4, Math.PI / 2, Math.PI / 2 * 3)
            left.moveTo(5, 1)
            left.lineTo((w - 15) * this.redRate, 1)
            left.lineTo((w - 15) * this.redRate - 5, 9)
            left.lineTo(5, 9)
            left.closePath()
            this.context.fillStyle = "#ff6d5b"
            this.context.fill(left)

            let center = new Path2D()
            center.moveTo((w - 15) * this.redRate + 5, 1)
            center.lineTo((w - 15) * this.redRate + 10, 1)
            center.lineTo((w - 15) * this.redRate + 5, 9)
            center.lineTo((w - 15) * this.redRate, 9)
            this.context.fillStyle = "#000000"
            this.context.fill(center)
            let right = new Path2D()
            right.moveTo((w - 15) * this.redRate + 15, 1)
            right.lineTo(w - 5, 1)
            right.lineTo(w - 5, 9)
            right.lineTo((w - 15) * this.redRate + 10, 9)
            right.moveTo(w - 5, 5)
            right.arc(w - 5, 5, 4, Math.PI / 2 * 3, Math.PI / 2)

            this.context.fillStyle = "#77439d"
            this.context.fill(right)
          })

        Text(this.rightText)
      }
      .width("100%")
      .padding({ left: 16, right: 16 })

      Button("点我修改进度")
        .onClick(() => {
          this.redRate = 0.75
        })
      Button("点我修改进度及左右文字导致画板宽度变化")
        .onClick(() => {
          this.redRate = 0.25
          this.leftText = "1234"
          this.rightText = "5678"
        })
    }
  }
}