[Flutter翻譯]使用圖像佔位符、預緩存和禁用的導航過渡來改善感知性能

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

原文做者：medium.com/@perclasson

發佈時間：2020年5月27日

感知性能是指一個應用程序給用戶的感受有多快。本文介紹了三種策略，您能夠在您的應用程序中使用它們來提升感知性能：圖像佔位符、預緩存圖像和禁用導航過渡。

圖片佔位符防止內容跳轉

當用戶在等待圖片加載，而後它們最終出現時，佈局可能會四處移動。經過在佈局中爲圖片佔位符留出空間，您能夠避免這種移動，以確保更好的用戶體驗。

請看下面的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（免費版）翻譯