本期 知识小集 Flutter 小分队为大家带来 Flutter 开发 Tips 合集。

• 如何判断一个界面是 Flutter 构建的(作者：talisk)

• 如何控制图片缓存(作者：Vadaski)

• 开发 Flutter App 时遇到困难，如何寻求帮助(作者：talisk)

如何判断一个界面是 Flutter 构建的

总有开发者说：这种效果肯定不是 Flutter 做的。问其原因，他说 Flutter 做的肯定能看出来嘛(意思就是，Flutter 做的效果毕竟不能和 Native 的效果媲美)。结局当然是这位开发者被打脸，Native App 的效果，Flutter 基本都能做出来。

那么怎么样去判断一个界面是不是 Flutter 构建的呢？最简单的一种办法，用两指滑动屏幕上的滚动列表，如果此时滚动列表以 2 倍的速度滚动，那么这极大概率是用 Flutter 构建的。用三个四个五个手指滚动呢，那滚动速度就是 3 倍、4 倍、5 倍。这个小技巧对于判断应用的 Flutter 使用状况是非常有效的，你可以轻易地了解一款 App 的什么样的场景和业务使用了 Flutter 构建。

前文讲到的技巧，基于一个假设，假设这里有一个滚动列表可供你进行尝试。如果是一个不含可滚动列表的 Flutter 界面，我们如何判断呢。Flutter 的实现机制告诉我们，Flutter 只会有一层 Native 的“画布”，因此可以通过 FLEX、Lookin、Reveal 等工具确定页面上所有元素均绘制在一层 FlutterView 上。

如何控制图片缓存

为了提高图片加载效率，Flutter内部会将加载过的图片，依照最近最少使用原则缓存，这个缓存默认最大100M，默认最多存储1000条。

使用100M的内存来缓存图片，对很多APP来说似乎有些大，所以我们可以设置其大小。方法是：

PaintingBinding.instance.imageCache.maximumSizeBytes = 10 << 20; // 10MiB，缓存最大10兆，你也可以设置其它值
PaintingBinding.instance.imageCache.maximumSize = 100; // 最多缓存100条

同时你也可以通过 PaintingBinding.instance.imageCache.clear() 来直接清除当前缓存，比如你当前页面需要很大的图片缓存，而退出当前页面又需要释放的时候。

原理

告诉完答案，下面说说为什么要这么干。

我们所有的Image类实例，无论是直接使用  Image 还是使用工厂方法 Image.network 或 Image.asset 等创建，其控制图片的都是其内部的image属性，image属性又是 ImageProvider 的子类，ImageProvider 通过 solve 方法找到图片，并返回 ImageStream ，而 ImageStream 就代表着图片。

在 solve 方法中，调用 PaintingBinding.instance.imageCache.putIfAbsent() 方法来获取并缓存图片。

所以我们可以看到，存储在 PaintingBinding 单例中的 ImageCache 实例，控制着图片缓存。ImageCache 里的宏定义 _kDefaultSize和 _kDefaultSizeBytes 代表缓存的默认大小。想操作ImageCache 的那些实例方法，只有通过 PaintingBinding.instance单例才能拿到 imageCache 实例。

你可以直接翻看Flutter SDK里面的image_cache.dart源码，里面的方法都很好理解，并且有注释。

开发 Flutter App 时遇到困难，如何寻求帮助

Flutter 活跃的社区与快速迭代的特性，吸引了许多开发者的注意。由于许多特性处于较为早期的阶段，框架本身或文档不甚完善，导致开发者经常踩坑。

寻求帮助有很多途径，Flutter 团队官方以及社区比较推荐的方式是到 GitHub flutter/flutter 仓库的 issue 区，利用搜索功能查询已提出的 issue。

若能够找到你相同情况的 issue，请按照 issue 讨论的方案进行尝试，若能够解决问题，请在有效的讨论内容上给予?，作为对解决方案的反馈与赞赏，给其他开发者提供参考。

若找到的 issue 不能解决问题，请在 issue 后描述出你的情况，以及你尝试过的方案，同其他开发者展开讨论。必要的时候可以附带截图或可复现问题的最简代码。

若无法找到适合的 issue，请新建一个 issue，并在正文中贴上你的 $ flutter doctor 输出信息，详细描述产生问题的步骤，最好配以可以复现问题的最简代码。

请注意，无论以何种方式参与 issue 区讨论，都请使用英文。不必过于担心语法和措辞，善用翻译工具，能够妥善表达你的状况就足够了。

---

推荐阅读 • 从实际问题看 SwiftUI 和 Combine 编程• 战五渣程序员的五项必备技能• 黑寡妇序列之分屏滤镜• Flutter 如何优雅的解决依赖版本冲突