最近在学习flutter,想检验一下自己的成果,于是想使用flutter实现移动端的瓦片地图框架Tileview的功能,并且在所有端都可以使用。
下面我就实现的过程和大家分享一下,最终实现的结果其实录屏了,结果好像是无法上传视频,be了,只能上连接了。
移动端效果,手势控制:
PC端效果,鼠标控制:
实现过程:
首先确定实现的功能,从简单到复杂一点点的抽离。
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