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

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

HarmonyOS

fox280

2024-11-27 08:41:54

1168浏览

回答 1

按赞同

按时间

zxjiu

参考代码：

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 
      }) 
    } 
 
  } 
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.