使用Flutter从零撸一个地图组件(一)

165 阅读1分钟

最近在学习flutter,想检验一下自己的成果,于是想使用flutter实现移动端的瓦片地图框架Tileview的功能,并且在所有端都可以使用。

下面我就实现的过程和大家分享一下,最终实现的结果其实录屏了,结果好像是无法上传视频,be了,只能上连接了。

移动端效果,手势控制:

finger.gif

fingure_bitmap.gif

PC端效果,鼠标控制:

windows.gif

实现过程:

首先确定实现的功能,从简单到复杂一点点的抽离。

1、手势操作

Flutter中提供了手势相关的组件GestureDetector用来监听手势的相关操作,放缩和移动等相关的操作,但是提供的onTap与onScale相关的方法是冲突的,但是我们可以通过onScale方法来计算出移动。

1.1 手势、鼠标放缩

手指:主要是三个方法,onScaleStart、onScaleUpdate、onScaleEnd,见名知意,就不赘述了,具体的操作在坐标转换介绍。

鼠标:比较特殊,使用的是Listen组件,并没有放缩的操作,所以需要监听PointerScrollEvent的滑动方向dy的值,大于0和小于0来判断放大或者缩小。

1.2 手势、鼠标的移动

手指:onScaleUpdate、onScaleStart配合使用

鼠标:onPointerHover、onPointerMove配合使用

1.3 手势、鼠标的速度

手指:onScaleEnd中现有的方法

鼠标:需要自己根据时间和滑动距离计算,没有现有方法

2、坐标的变换(核心功能)

敬请期待,下次讲解

3、公共方法的抽离

敬请期待,下次讲解

4、组件的封装

敬请期待,下次讲解

5、测试

见gif