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

} else { return AnimatedSwitcher( duration: const Duration(milliseconds: 500), child: frame != null ? child : placeholder, ); } }, ); } }

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

在 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 中查看完整的交互例子

结语

希望你在本文中找到一些有用的技巧来提高 Flutter web app 的感知性能。在 Flutter Gallery 中，我们禁用了 web 端的导航过渡动画和使用了图片占位符来避免加载页面时布局的跳动，其中的实现和本文所描述的是类似，如果你想看代码，可以在 GitHub 上找到。

感谢阅读！

这篇文章是我们在提高 Flutter Gallery 性能中学习到的系列内容之一。希望对你有所帮助，能让你学到可以在你的 Flutter app 中用上的内容。系列文章如下：

本文在开源项目：github.com/Android-Alv… 中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...