Flutter 小技巧之 InkWell & Ink 你了解多少

今天要介绍一个「陈年」小技巧，主要是关于 InkWell 的基础科普，InkWell 控件相信大家不会陌生， 作为 Flutter 开发中最常用的点击 Widget ，合作 Flutter 自带的 Material ，能够轻松完结带有水波纹等的点击作用。

而之所以要介绍这个，主要是发现好像有一部分人关于 InkWell 的点击作用完结存在误解，例如，你知道水波纹是怎么完结的吗？

首要，如下代码所示，能够看到代码运行后在屏幕中心出现了一个蓝色的正方形，此刻假如你点击正方形，会发现 click InkWell 会正常打印，可是却看不到水波作用，这是为什么呢？

其实这儿和 InkWell 的 child 有关系，假如把上面蓝色的 Container 的 color 修改为 Colors.blue.withAlpha(100) ，如下图所示，能够看到此刻水波纹作用又出现了。

所以一开始水波纹作用之所以会看不到，直接原因其实是由于被 InkWell 的 child 的蓝色给掩盖。

所以能够清晰一点， InkWell 的水波纹和点击作用，其实是在底部产生。

事实上 ， InkWell 的点击作用并不是经过它本身产生的，而是经过 Material 完结的动画制作，默许情况下运用的是 Scaffold 内部的 Material 来完结点击作用的制作。

所以关于不熟悉 InkWell 的开发者来说，这是一个比较反直觉的设定， InkWell 的点击作用不是经过本身产生的，而是默许经过地点的 Scaffold 内的 Material 来完结点击动画。

所以，当你不运用 Scaffold 直接引用 InkWell 时，就会收到如下图所示的过错提示，由于没有了 Scaffold ， 默许的 Material 不存在了，一般这时分咱们能够手动添加多一个 Material 控件来处理过错。

那 Material 是怎么完结点击动画？

事实上在 Material 内部存在一个叫 _InkFeatures 的控件，便是它担任在点击产生时制作点击作用，如下图所示，InkWell 默许会有 InkSplash 和 InkHighlight 两个点击作用，它们别离对应水波纹作用和高亮作用。

那 InkWell 的点击时怎么通知 Material 制作动画？

首要，如下图所示，当 InkWell 内有点击产生时会触发 _startNewSplash 办法，然后经过控件方位和巨细去创立当前所需的 InkFeature 。

正如前面所示，默许情况下 InkWell 在点击时会创立一个 InkSplash 和 InkHighlight ，它们别离对应水波纹作用和点击高亮作用，而不管是 InkSplash 仍是 InkHighlight ，它们在被创立的时分，都会经过 Material.of(context) 获取 MaterialInkController ，然后再创立经过 controller 的 addInkFeature() 办法将点击作用添加到 Material 中。

在 Material 中，addInkFeature 会经过 markNeedsPaint 来使得 _InkFeatures 产生重绘，然后触发 InkSplash 和 InkHighlight 的点击 paint 动画。

当然，有添加就有移除，例如 InkHighlight 就会在动画完毕时调用 dispose 办法移除对应的 InkFeature 。

那么简略总结一下： InkWell 的点击作用是经过 Material 完结，默许运用的是 Scaffold 自带的 Material 。

那么已然 InkWell 的点击作用是经过 Material 完结，前面点击的水波纹和高亮作用其实是被 Container 的背景色遮挡，如下图所示，这时分咱们能够添加多一个 Material ，然后将背景色挪到 Material 上，此刻能够看到点击作用康复正常。

当然，你也能够将颜色挪到更外层的 Container ，这样就不会遮挡到 Material 制作点击动画的作用。

那么还有没有更高雅的做法？这就不得不提 Ink 。

Ink 的作用便是为了方便运用 InkWell 的点击作用而存在， 你能够把 Container 上的 color 、decoration 等配置挪到 Ink 上然后处理 Material 的点击作用被遮挡的问题。

由于 Ink 内部是经过 InkDecoration 完结主要逻辑，而 InkDecoration 本身也是一个 InkFeature ， 所以在触发点击作用时， InkDecoration 作为 InkFeature ，在创立时同样会调用 controller.addInkFeature(this); ，所以同样会触发制作，只是制作的层级在 InkWell 内其他 InkFeature 之下。

当然，如下图所示你也能够这么写， Ink 的中心理念便是完结在 Material 空间上进行制作，这样就不会干扰或者遮挡后续 InkWell 的点击作用。

所以 Ink 相当于时另辟蹊径，利用 Material 的特性来处理掩盖问题，所以针对 InkWell 点击作用被掩盖问题，你是选择调整层级合作 Material 仍是运用 Ink ？

当然，假如你想要的去除水波纹点击作用，那么能够参阅 《Flutter 3 下的 ThemeExtensions 和 Material3》 。

那么本篇小技巧到这儿就完毕啦，是不是很简略，中心主要是理解 InkWell 点击作用的由来，避免有时分自己被某些坑绕进去而无法自拔，假如你还有什么想说的，欢迎留言谈论。