HarmonyOS Next开发----k线图滑动问题

最新推荐文章于 2025-03-15 08:47:01 发布

原创

最新推荐文章于 2025-03-15 08:47:01 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

前言

最近做股票软件鸿蒙版本的适配，K线趋势图的手势交互上遇到了问题，这里记录下~

功能需求：

实现k线趋势图滑动及fling的效果

思路：

1. 借鉴Flutter版本的思路，在K线趋势图上面叠加一个Scroll布局，使用系统提供给我们的Scroller来计算手势滑动及fling效果。
2. 监听滑动手势PanGesture来处理，fling的惯性滑动效果需要自己模拟计算。

 Scroll(this.mScroller) {
   
   
        Text('').width('100%')
      }
      .onAreaChange((oldValue: Area, newValue: Area)=>{
   
   
        this.mScroller.scrollEdge(Edge.End)
      })
      .height('100%')
      .width(this.getTotalKLineWidth() + 200)
      .scrollable(ScrollDirection.Horizontal)
      .scrollBar(BarState.On)
      .friction(0.5)
      .onScroll((xOffset, yOffset)=>{
   
   
          let result: boolean = this.mGestureHelper.scroll(this.mScroller.currentOffset().xOffset, this.getTotalKLineWidth());
          if (result) {
   
   
            this.onDraw();
          }
      })
      .gesture(GestureGroup(GestureMode.Parallel,
        LongPressGesture()