【老孟Flutter】如何提高Flutter應用程式的性能

2021 年 1 月 21 日
筆記
Flutter

首先 Flutter 是一個非常高性能的框架，因此大多時候不需要開發者做出特殊的處理，只需要避免常見的性能問題即可獲得高性能的應用程式。

重建最小化原則

在調用 setState() 方法重建組件時，一定要最小化重建組件，沒有變化的組件不要重建，看下面的Demo，這是一個設置頁面，

import 'package:flutter/material.dart';

class SettingDemo extends StatefulWidget {
  @override
  _SettingDemoState createState() => _SettingDemoState();
}

class _SettingDemoState extends State<SettingDemo> {

  Widget _item(
      {IconData iconData, Color iconColor, String title, Widget suffix}) {
    return Container(
      height: 45,
      child: Row(
        children: <Widget>[
          SizedBox(
            width: 30,
          ),
          Icon(
            iconData,
            color: iconColor,
          ),
          SizedBox(
            width: 30,
          ),
          Expanded(
            child: Text('$title'),
          ),
          suffix,
          SizedBox(
            width: 15,
          ),
        ],
      ),
    );
  }

  bool _switchValue = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _item(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '是否允許4G網路下載',
          suffix: Switch(
              value: _switchValue,
              onChanged: (value) {
                setState(() {
                  _switchValue = value;
                });
              }),
        ),
        Divider(),
        _item(
          iconData: Icons.notifications,
          iconColor: Colors.blue,
          title: '消息中心',
          suffix: Text(
            '12條',
            style: TextStyle(color: Colors.grey.withOpacity(.5)),
          ),
        ),
        Divider(),
        _item(
          iconData: Icons.thumb_up,
          iconColor: Colors.green,
          title: '我贊過的',
          suffix: Text(
            '121篇',
            style: TextStyle(color: Colors.grey.withOpacity(.5)),
          ),
        ),
        Divider(),
        _item(
          iconData: Icons.grade,
          iconColor: Colors.yellow,
          title: '收藏集',
          suffix: Text(
            '2個',
            style: TextStyle(color: Colors.grey.withOpacity(.5)),
          ),
        ),
        Divider(),
        _item(
          iconData: Icons.account_balance_wallet,
          iconColor: Colors.blue,
          title: '我的錢包',
          suffix: Text(
            '10萬',
            style: TextStyle(color: Colors.grey.withOpacity(.5)),
          ),
        ),
      ],
    );
  }
}

注意看上圖右邊下半部分，點擊切換開關的時候，所有的組件全部重建了，理想情況下，應該只是 Switch 組件進行切換，因此將 Switch 組件進行封裝：

class _SwitchWidget extends StatefulWidget {
  final bool value;

  const _SwitchWidget({Key key, this.value}) : super(key: key);

  @override
  __SwitchWidgetState createState() => __SwitchWidgetState();
}

class __SwitchWidgetState extends State<_SwitchWidget> {
  bool _value;

  @override
  void initState() {
    _value = widget.value;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Switch(
      value: _value,
      onChanged: (value) {
        setState(() {
          _value = value;
        });
      },
    );
  }
}

使用：

_item(
  iconData: Icons.notifications,
  iconColor: Colors.blue,
  title: '是否允許4G網路下載',
  suffix: _SwitchWidget(
    value: false,
  ),
)

此時看到重建的組件只有 _SwitchWidget 和 Switch 組件，提高了性能。

如果 Switch 組件的狀態改變也會改變其它組件的狀態，這是典型的組件間通訊，這種情況下可以使用 InheritedWidget，但更建議使用狀態管理框架（比如 Provider 等），而不是將其父組件改變為StatefulWidget。

盡量不要將整個頁面定義為 StatefulWidget 組件，因為一旦重建將重建此頁面下所有的組件，尤其是 Switch 、Radio等組件狀態的改變導致的重建，強烈建議對其進行封裝。

這裡有一個誤區，有些人認為，將組件拆分為方法可以減少重建，就比如上面的例子，將 _SwitchWidget 組件改變為方法，該方法返回 Switch 組件，這是錯誤的，此種方式並不能減少重建，但是將一個組件拆分為多個小組件是可以減少重建的，就像上面的例子，將需要重建的 Switch 封裝為一個單獨的 StatefulWidget 組件，避免了其他不必要的重建。

強烈建議：在組件前加上 const

在組件前加上 const ，相當於對此組件進行了快取，下面是未加 const 的程式碼：

class ConstDemo extends StatefulWidget {
  @override
  _ConstDemoState createState() => _ConstDemoState();
}

class _ConstDemoState extends State<ConstDemo> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text('老孟'),
          RaisedButton(onPressed: (){
            setState(() {

            });
          })
        ],
      ),
    );
  }
}

給 Text(‘老孟’) 組件加上 const：

const Text('老孟'),

對比兩次 Text 組件的重建情況，加上 const 後，未重建。

避免更改組件樹的結構和組件的類型

有如下場景，有一個 Text 組件有可見和不可見兩種狀態，程式碼如下：

bool _visible = true;

@override
Widget build(BuildContext context) {
  return Center(
    child: Column(
      children: [
        if(_visible)
          Text('可見'),
        Container(),
      ],
    ),
  );
}

可見時的組件樹：

不可見時的組件樹：

兩種狀態組件樹結構發生變化，應該避免發生此種情況，優化如下：

Center(
  child: Column(
    children: [
      Visibility(
        visible: _visible,
        child: Text('可見'),
      ),
      Container(),
    ],
  ),
)

此時不管是可見還是不可見狀態，組件樹都不會發生變化，如下：

還有一種情況是根據不同的條件構建不同的組件，如下：

bool _showButton = true;

@override
Widget build(BuildContext context) {
  return Center(
    child: Column(
      children: [
        _showButton ? RaisedButton(onPressed: null) : Text('不顯示'),
        Container(),
      ],
    ),
  );
}

設置為 true 時的組件樹結構：

設置為 false 時的組件樹結構：

看到左側子節點由 RaisedButton 變為了 Text。

上面的情況組件樹發生了更改，不管是類型發生更改，還是深度發生更改，如果無法避免，那麼就將變化的組件樹封裝為一個 StatefulWidget 組件，且設置 GlobalKey，如下：

封裝變化的部分：

class ChildWidget extends StatefulWidget {
  const ChildWidget({Key key}) : super(key: key);

  @override
  _ChildWidgetState createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  bool _showButton = true;

  @override
  Widget build(BuildContext context) {
    return _showButton ? RaisedButton(onPressed: null) : Text('不顯示');
  }
}

構建：

class ConstDemo extends StatefulWidget {
  @override
  _ConstDemoState createState() => _ConstDemoState();
}

class _ConstDemoState extends State<ConstDemo> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          ChildWidget(key: GlobalKey(),),
          Container(),
        ],
      ),
    );
  }
}

雖然通過 GlobalKey 提高了上面案例的性能，但我們千萬不要亂用 GlobalKey，因為管理 GlobalKey 的成本很高，所以其他需要使用 Key 的地方建議考慮使用 Key, ValueKey, ObjectKey, 和 UniqueKey。

關於 GlobalKey 的相關說明參考：//api.flutter.dev/flutter/widgets/GlobalKey-class.html

關於ListView 的優化

ListView是我們最常用的組件之一，用於展示大量數據的列表。如果展示大量數據請使用 ListView.builder 或者 ListView.separated，千萬不要直接使用如下方式：

ListView(
  children: <Widget>[
    item,item1,item2,...
  ],
)

這種方式一次載入所有的組件，沒有「懶載入」，消耗極大的性能。

ListView 中 itemExtent 屬性對動態滾動到性能提升非常大，比如，有2000條數據展示，點擊按鈕滾動到最後，程式碼如下：

class ListViewDemo extends StatefulWidget {
  @override
  _ListViewDemoState createState() => _ListViewDemoState();
}

class _ListViewDemoState extends State<ListViewDemo> {
  ScrollController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          controller: _controller,
          itemBuilder: (context, index) {
            return Container(
              height: 80,
              alignment: Alignment.center,
              color: Colors.primaries[index % Colors.primaries.length],
              child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
            );
          },
          itemCount: 2000,
        ),
        Positioned(
            child: RaisedButton(
          child: Text('滾動到最後'),
          onPressed: () {
            _controller.jumpTo(_controller.position.maxScrollExtent);
          },
        ))
      ],
    );
  }
}

耗時在2秒左右，加上 itemExtent 屬性，修改如下：

ListView.builder(
  controller: _controller,
  itemBuilder: (context, index) {
    return Container(
      height: 80,
      alignment: Alignment.center,
      color: Colors.primaries[index % Colors.primaries.length],
      child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
    );
  },
  itemExtent: 80,
  itemCount: 2000,
)

優化後瞬間跳轉到底部。

這是因為不設置 itemExtent 屬性，將會由子組件自己決定大小，大量的計算導致UI堵塞。

關於 AnimatedBuilder TweenAnimationBuilder 的優化

這裡說的是向AnimatedBuilder 、TweenAnimationBuilder 等一類的組件的問題，這些組件都有一個共同點，帶有 builder 且其參數重有 child。

以 AnimatedBuilder 為例，如果 builder 中構建的樹中包含與動畫無關的組件，將這些無關的組件當作 child 傳遞到 builder 中比直接在 builder 中構建更加有效。

比如下面的程式碼，直接在 builder 中構建子組件：

AnimatedBuilder(
    animation: animation,
    builder: (BuildContext context, Widget child) {
      return Transform.rotate(
        angle: animation.value,
        child: FlutterLogo(size: 60,),
      );
    },
  )

優化後的程式碼：

AnimatedBuilder(
    animation: animation,
    builder: (BuildContext context, Widget child) {
      return Transform.rotate(
        angle: animation.value,
        child: child,
      );
    },
    child: FlutterLogo(size: 60,),
  )

謹慎的使用一些組件

部分組件一定要謹慎使用，因為這些組件包含一些昂貴的操作，比如 saveLayer() 方法。

調用saveLayer（）會分配一個螢幕外緩衝區。將內容繪製到螢幕外緩衝區中可能會觸發渲染目標切換，這在較早的GPU中特別慢。

另外雖然下面這些組件比較消耗性能，但並不是禁止大家使用，而是謹慎使用，如果有替代方案，考慮使用替代方法。

尤其注意，如果這些組件頻繁重建（比如動畫的過程），要重點優化。

Clip 類組件

Clip 類組件是常用的裁剪類組件，比如：ClipOval、ClipPath、ClipRRect、ClipRect、CustomClipper。這些組件中都有 clipBehavior 屬性，不同的值性能是不同的，

///  * [hardEdge], which is the fastest clipping, but with lower fidelity.
///  * [antiAlias], which is a little slower than [hardEdge], but with smoothed edges.
///  * [antiAliasWithSaveLayer], which is much slower than [antiAlias], and should
///    rarely be used.

越往下，速度越慢。

一些簡單的圓角組件的設置可以使用 Container 實現：

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image:  DecorationImage(
          image: NetworkImage(
              '//flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          color: Colors.blue,
          width: 2,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
    )

Opacity

Opacity 組件的功能是使子組件透明。此類將其子級繪製到中間緩衝區中，然後將子級混合回到部分透明的場景中。

對於除0.0和1.0之外的不透明度值，此類相對昂貴，因為它需要將子級繪製到中間緩衝區中。對於值0.0，根本不繪製子級。對於值1.0，將立即繪製沒有中間緩衝區的子對象。

如果僅僅是對單個 Image 或者 Color 增加透明度，直接使用比 Opacity 組件更快：

 Container(color: Color.fromRGBO(255, 0, 0, 0.5))

比使用 Opacity 組件更快：

Opacity(opacity: 0.5, child: Container(color: Colors.red))

如果對組件的透明度進行動畫操作，建議使用 AnimatedOpacity。

還有一些組件也要慎重使用，比如：

ShaderMask
ColorFilter
BackdropFilter

文中如果有不完善或者不正確的地方歡迎提出意見，後面如果優化的補充將會在我的部落格中進行補充，地址：

//laomengit.com/blog/20201227/improve_performance.html

參考鏈接：

//flutter.dev/docs/perf/rendering/best-practices

//api.flutter.dev/flutter/widgets/Opacity-class.html#transparent-image

//api.flutter.dev/flutter/widgets/StatefulWidget-class.html#performance-considerations

交流

老孟Flutter部落格（330個控制項用法+實戰入門系列文章）：//laomengit.com

添加微信或者公眾號領取《330個控制項大全》和《Flutter 實戰》PDF。

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：

Tags: Flutter