HarmonyOS Scroll 横向滑动时根据滑动的距离触发视图不更新

import display from '@ohos.display' 
import { BusinessError } from '@kit.BasicServicesKit' 
 
@Entry 
@Component 
struct Index { 
  private settings: RenderingContextSettings = new RenderingContextSettings(true) 
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 
  @State scrollValue: number = 0 
  size_11: number = vp2px(11) 
 
  @State screenWidth: number = 0 
 
  @State @Watch('draw')distance:number = 0 
 
  draw(){ 
    this.screenWidth = this.scrollValue 
    this.context.clearRect(0,0,this.screenWidth,200); 
    this.context.fillStyle = '#ff0000' 
    this.context.font = `normal normal ${this.size_11}px sans-serif` 
    this.context.textBaseline = 'middle' 
    let text = '哈' 
    this.context.fillText(text, this.scrollValue + 100, 100) 
 
 
    let text1 = '哈' 
    this.context.fillText(text1, 100, 200) 
  } 
  build() { 
    Column() { 
      Scroll() { 
        Column() { 
          Canvas(this.context) 
            .width(800)//.backgroundColor('#0000ff') 
            .onReady(() => { 
              this.draw() 
            }) 
        } 
      } 
      .height(400) 
      .scrollable(ScrollDirection.Horizontal) 
      .backgroundColor('#ff00fc37') 
      .scrollBar(BarState.Off) 
      .onScroll((xOffset: number, yOffset: number) => { 
        this.scrollValue = this.scrollValue + xOffset + 10 
        if (this.scrollValue < 0) { 
          this.scrollValue = 0 
        } 
        console.info('滚动距离：' + xOffset + '.. ' + this.scrollValue) 
        this.distance = this.distance+xOffset 
      }) 
    } 
 
  } 
}