发布时间:2020年5月27日 - 4分钟阅读
感知性能是指一个应用程序给用户的感觉有多快。本文介绍了三种策略,您可以在您的应用程序中使用它们来提高感知性能:图像占位符、预缓存图像和禁用导航过渡。
图片占位符防止内容跳转
当用户在等待图片加载,然后它们最终出现时,布局可能会四处移动。通过在布局中为图片占位符留出空间,您可以避免这种移动,以确保更好的用户体验。
请看下面的GIF例子,看看在不使用任何占位符的情况下,它看起如何:
如果你已经在你的应用程序中缓存并加载了一个占位符图片,你可以使用FadeInImage widget来显示占位符。如果你想使用一个widget代替图像作为占位符,你可以通过Image.frameBuiler属性来实现。
Image.frameBuilder
属性负责构建 Image widget,它有四个参数。
- 构建
上下文
- 图像widget的
子节点
。 - 一个代表
绘制帧
的数字,当图像还在加载时,该数字为空。 - 一个布尔值
wasSynchronouslyLoaded
,如果图像已经加载,则为真。
当实现一个占位符widget时,首先用wasSynchronouslyLoaded
检查图像是否已经加载,如果是,则返回子节点
。如果没有,则使用AnimatedSwitcher在加载时在占位符和图像之间创建一个交叉渐变。
class ImageWidgetPlaceholder extends StatelessWidget {
const ImageWidgetPlaceholder({
Key key,
this.image,
this.placeholder,
}) : super(key: key);
final ImageProvider image;
final Widget placeholder;
@override
Widget build(BuildContext context) {
return Image(
image: image,
frameBuilder: (context, child, frame, wasSynchronouslyLoaded) {
if (wasSynchronouslyLoaded) {
return child;
} else {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: frame != null ? child : placeholder,
);
}
},
);
}
}
添加占位符后,布局不再左右移动,而是在加载时淡入图像。
在图片显示之前进行预缓存
如果你的应用在显示图片之前有一个闪屏或欢迎屏,你也可以通过调用 precacheImage 函数来预缓存这些图片。
precacheImage(NetworkImage(url), context)。
下面的GIF显示了一个在欢迎屏幕上预缓存图像的例子。
在Flutter网页上禁用导航过渡
当用户在页面之间移动时,就会出现导航转换,在移动应用中,它可以成为让用户自我定位的好方法。然而,对于Web应用来说,它不是你通常会看到的东西。为了提高性能,你可以禁用页面过渡动画。
默认情况下,MaterialApp
使用与平台相关的路由的页面过渡(Android的向上滑动或iOS的从侧面滑动)。要重写这个行为,你可以创建自己的PageTransitionsTheme类。要检测应用程序何时在web上运行,请使用kIsWeb常量。如果是在web上,则通过返回子节点来禁用过渡。
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class NoTransitionsOnWeb extends PageTransitionsTheme {
@override
Widget buildTransitions<T>(
route,
context,
animation,
secondaryAnimation,
child,
) {
if (kIsWeb) {
return child;
}
return super.buildTransitions(
route,
context,
animation,
secondaryAnimation,
child,
);
}
}
为我们的MaterialApp
设置pageTransitionsTheme
。
MaterialApp(
theme.ThemeData() ThemeData(
pageTransitionsTheme.NoTransitionsOnWeb() NoTransitionsOnWeb()。
),
)
没有任何动画的页面过渡。
结束语
我希望你能在这篇文章中找到一些有用的技巧,如何提高应用程序中的感知性能。这篇文章是一个系列的一部分,讲述了我们在为Flutter Gallery提高性能时的心得。对于Flutter Gallery,我们禁用了网页上的页面过渡,并为图片添加了占位符,以避免加载时出现布局偏移。实现方式与本文描述的类似,如果你想看代码,你可以在GitHub上找到它。谢谢你的阅读!
通过www.DeepL.com/Translator(免费版)翻译