Flutter-性能优化：图片占位符、预缓存和禁用导航过渡动画

在 DartPad 中查看完整例子

如果你的 app 中已经缓存了一个图片占位符，你可以使用 FadeInImage widget 来显示占位符。如果你想使用一个 widget 而不是图片作为占位符，你可以使用 Image.frameBuilder 属性。

Image.frameBuilder 属性负责构建一个图片 widget ，它有四个参数：

• context：构建上下文
• child： widget 子元素
• frame：一个代码该 frame 的数字，如果图片还在加载中的话，为 null
• wasSynchronousLoaded ：布尔值，图片加载完成后为 true

实现占位符 widget 时，首先要通过 wasSynchronousLoaded 检查图片是否已经加载完成，如果加载完成，返回 child 。如果没有，使用 AnimatedSwitcher widget 来创建一个占位符到显示图片的渐现动画：

class ImageWidgetPlaceholder extends StatelessWidget {
const ImageWidgetPlaceholder({
Key key,
this.image,
this.placeholder,
}) : super(