RTC Dev Meetup：Flutter 开发实战与前景展望（三）

4、手势

Flutter 在手势中引入了竞技的概念, Down 事件在 Flutter 中尤为重要。

• PointerDownEvent 是一切的起源，在 Down 事件中一般不会决出胜利者。

• 在 MOVE 和 UP 的时候才竞争得到响应。

• 以点击为例子： Down 时添加进去参与竞争， UP 的时候才决定谁胜利，胜利条件是：

I、 UP 的时候如果只有一个，那么就是它了。

II、 UP 的时候如果有多个，那么强制队列里第一个直接胜利。

• 这里包含了有趣的点就是，都在 UP 的时候才响应，那么 Down 事件怎么先传递出去了？

FLutter 在这里做了一个 didExceedDeadline 机制 ，事实上在上面的 addPointer 的时候，会启动了一个定时器，默认 100 ms，如果超过指定时间没 UP ，那就先执行这个 didExceedDeadline 响应 Down 事件。

• 那问题又来了，如果这时候队列里两个呢?

它们的 onTapDown 都会被触发，但是 onTap 只有一个获得。

• 如果有两个滑动 ScrollView 嵌套呢？

举个简单的例子，两个 SingleChildScrollView 的嵌套时，在布局会经历：

performLayout -> applyContentDimensions -> applyNewDimensions -> context.setCanDrag(physics.shouldAcceptUserOffset(this));

只有 shouldAcceptUserOffset 为 ture 时，才会添加 VerticalDragGestureRecognizer 去处理手势。

而判断条件主要是 returnmath.max(0.0,child.size.height-size.height); ，也就是如果 child Scroll 的 height 小于父控件 Scroll 的时候，就会出现 child 不添加 VerticalDragGestureRecognizer 的情况，这时候根本就没有竞争了。

5、动画

Flutter 中的动画是怎么执行的呢？

我们先看一段代码，然后这段代码执行的效果如下图 2 所示。

那既然 Widget 都是一帧，那么动画肯定有 setState 的地方了。

首先这里有个地方可以看下，这时候 200 这个数值执行后是会报错的，因为白框内可见 Tween 中的 T 在这时候会出现既有 int 又有 double ，无法判断的问题，所以真实应该是 200.0 。

同时你发现没有，代码中 parent 的 Container 在 只有 100 的情况下，它的 child 可以正常的画 200，这是因为我们的 paint 没有跟着 RenerObjcet 的大小走， 所以一般情况下，整个屏幕都是我们的画版，Canvas 绘制与父控件大小可以没关系。

同时动画是通过 vsync 同步信号去触发的，就是我们 mixin 的 SingleTickerProviderStateMixin，它内部的 Ticker 会通过 SchedulerBinding 的 scheduleFrameCallback 同步信号触发重绘 。

动画后的控件的点击区域，和你的动画数据改变的是 paint 还是 layout 有关 。

6、状态管理

scope_model 、 flutter_redux、 fish_redux 、甚至还有有 dva_flutter 等等，可以看出状态管理在 flutter 中和前端十分相近。

这里简单说说 scope_model ，它只有一个文件，但是很巧妙，它利用的就是 AnimationBuilder 的特性。

如下图是使用代码，在前面我们知道，状态管理使用的是 InheritedWidget 实现共享的，而当我们对 Model 进行数据改变时，通过调用 notifyListeners 通知页面更新了。

这里的原理是什么呢？

• 其实 scope_model 内部利用了 AnimationBuilder ，而 Model 实现了 Listenable 接口。

• 当 Model 设置给了 AnimationBuilder 时， AnimationBuilder 会执行 addListener 添加监听，而监听方法里会执行 setState。

• 所以我们改变 set 方法时调用 notifyListeners 就触发了 setState 去更新了，这样体现出了前面说的 FLutter 常见的开发模式。

三、混合开发

以 Android 的角度来说，从方便调试和解耦集成上，我们一般会以 aar 的形式集成混合开发，这里就会涉及到 gradle 打包的一个概念。

1、如下代码所示，在项目中进行 gradle 脚本修改，组件化开发模式，用 apk 开发，用 aar 提供集成，正常修改 gradle 代码即可快速打包。

那如果 Flutter 的项目插件带有本地代码呢？

如果开发过 ReactNative 的应该知道，在原生插件安装时会需要执行 react-nativelink ，而这时候会修改项目的 gradle 和 java 代码。