[Flutter翻译]使用图像占位符、预缓存和禁用的导航过渡来改善感知性能

1,698 阅读3分钟

原文地址:medium.com/flutter/imp…

原文作者:medium.com/@perclasson

发布时间:2020年5月27日 - 4分钟阅读

感知性能是指一个应用程序给用户的感觉有多快。本文介绍了三种策略,您可以在您的应用程序中使用它们来提高感知性能:图像占位符、预缓存图像和禁用导航过渡。

图片占位符防止内容跳转

当用户在等待图片加载,然后它们最终出现时,布局可能会四处移动。通过在布局中为图片占位符留出空间,您可以避免这种移动,以确保更好的用户体验。

请看下面的GIF例子,看看在不使用任何占位符的情况下,它看起如何:

查看DartPad上的完整交互式示例。

如果你已经在你的应用程序中缓存并加载了一个占位符图片,你可以使用FadeInImage widget来显示占位符。如果你想使用一个widget代替图像作为占位符,你可以通过Image.frameBuiler属性来实现。

Image.frameBuilder 属性负责构建 Image widget,它有四个参数。

  1. 构建上下文
  2. 图像widget的子节点
  3. 一个代表绘制帧的数字,当图像还在加载时,该数字为空。
  4. 一个布尔值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,
          );
        }
      },
    );
  }
}

添加占位符后,布局不再左右移动,而是在加载时淡入图像。

查看DartPad上的完整交互式示例。

在图片显示之前进行预缓存

如果你的应用在显示图片之前有一个闪屏或欢迎屏,你也可以通过调用 precacheImage 函数来预缓存这些图片。

precacheImage(NetworkImage(url), context)。

下面的GIF显示了一个在欢迎屏幕上预缓存图像的例子。

查看DartPad上的完整交互式示例。

在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()。
  ),
)

没有任何动画的页面过渡。

在DartPad上查看完整的交互式示例。

结束语

我希望你能在这篇文章中找到一些有用的技巧,如何提高应用程序中的感知性能。这篇文章是一个系列的一部分,讲述了我们在为Flutter Gallery提高性能时的心得。对于Flutter Gallery,我们禁用了网页上的页面过渡,并为图片添加了占位符,以避免加载时出现布局偏移。实现方式与本文描述的类似,如果你想看代码,你可以在GitHub上找到它。谢谢你的阅读!


通过www.DeepL.com/Translator(免费版)翻译