【老孟Flutter】如何提高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,
  ),
)

此時看到重建的組件只有 _SwitchWidgetSwitch 組件,提高了性能。

如果 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: