Flutter实现电影院选座效果

导语

接到了一个仿电影院的需求，上周几乎是找遍了百度，谷歌，stackoverflow。均没有找到用flutter实现的效果，那只能自己写一个了。本文只讲思路，具体实现还需各位看官自己动手。只要看懂了下面的思路，实现起来非常简单。

直接上效果图

竖屏：

横屏：

初始化自适应屏幕的放大缩小效果：

布局分析

中间的座位=>矩阵，通过Column嵌套Row实现，不能通过GridView实现（滑动冲突，下文会说明）

左侧导航条=>一个简单的Column（不能用ListView，同样会造成滑动冲突）

交互分析&实现

放大缩小拖动效果：

对于放大缩小拖动的效果，Flutter现在有自带的组件InteractiveViewer

通过这个组件可完美实现放大缩小效果。组件属性这边不展开解释，比较简单，可点击上面链接自行了解。

这里讲下两个重点属性：

1、回调事件

• 交互开始 onInteractionStart
• 交互更新 onInteractionUpdate
• 交互结束 onInteractionEnd

2、变换控制器transformationController

可以通过这个类来通过代码控制放大缩小效果

导航条跟随座位表放大缩小拖动：

左边导航条跟随中间座位的放大缩小，以及行数定位不偏离：

上面讲的那些东西一般大家都能想到，也很好实现。这个交互效果的真正难点是这个跟随滑动效果。

由于左边的导航条是固定在最左侧的，而座位表可以全屏拖动，所以这座位表和导航条不能放在一个缩放组件里， 不然座位表放大的时候，直接将导航条放大出屏幕了。所以我们的思路就是将导航条和座位表作为Stack的子组件，然后座位表实现放大缩小效果，并且让导航条能跟随座位表进行放大缩小。笔者在这试了很多方法：

方法一：

左侧导航栏和中间座位表均使用InteractiveViewer

然后通过InteractiveViewer的回调事件和变换控器来实现效果同步

结果：

失败，transformationController的原理是Matrix4泛型的ValueNotifier（四维矩阵），简单的移动放大还能实现，完全克隆一个放大缩小拖动效果，笔者做不到。。各位如果线性代数非常牛逼的可以试试。

方法二ÿ