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

有了占位符，布局再也不会跳来跳去了，而且图片也有了渐现效果：

在 DartPad 中查看完整例子

预缓存图片

如果你的 app 在显示图片界面之前有欢迎界面，你可以调用 precacheImage 方法来预缓存图片。

precacheImage(NetworkImage(url), context);

来看一下效果：

在 DartPad 中查看完整例子

在 Flutter web app 中禁用导航过渡动画

导航过渡动画一般在用户切换页面时使用，在移动 app 中，这种方式可以很好地让用户知道知道自己在哪里。但是，在 web 中，很少看到这样的交互。所以为了提高感知性能，你可以禁用页面间的过渡动画。

默认情况下， MaterialApp 会根据不同平台来使用不同的过渡动画（Android 向上滑动，而 iOS 是向右（左）滑动）。为了覆盖这个默认行为，你需要创建自定义的 PageTransitionsTheme 类。你可以使用 kIsWeb 常量来判断 app 是否在 web 中运行。如果是，通过返回 child 来禁用过渡动画：

import ‘package:flutter/foundation.dart’;
import ‘package:flutter/material.dart’;

class NoTransitionsOnWeb extends PageTransitionsTheme {
@override
Widget buildTransitions(
route,
context,
animation,
secondaryAnimation,
child,
) {
if (kIsWeb) {
return child;
}
return super.buildTransitions(
route,
context,
animation,
secondaryAnimation,
child,
);
}
}

设置 MaterialApp 的 pageTransitionsTheme 选项：

MaterialApp(
theme: ThemeData(
pageTransitionsTheme: NoTransitionsOnWeb(),
),
)

没有任何过渡动画的页面切换效果如下：

在 DartPad 中查看完整的交互例子

总结

找工作是个很辛苦的事情，而且一般周期都比较长，有时候既看个人技术，也看运气。第一次找工作，最后的结果虽然不尽如人意，不过收获远比offer大。接下来就是针对自己的不足，好好努力了。

最后为了节约大家的时间，我把我学习所用的资料和面试遇到的问题和答案都整理成了PDF文档，都可以分享给有需要的朋友，如有需要私信我【资料】或者**【点这里】免费领取**

《Android面试复习资料汇总》

喜欢文章的话请关注、点赞、转发 谢谢！

9%9D%A2%E8%AF%95%E6%8B%BF%E9%AB%98%E8%96%AA%EF%BC%81.md)**

喜欢文章的话请关注、点赞、转发 谢谢！