flutter性能优化之代码实践

1.建议在组件前加上 const

对于一些静态组件如Text、Color、Padding、SizedBox等，或者不会发生状态改变的组件前加上const，相当于对此组件进行了缓存，全局setState不会引起有const限定符的组件重建

    return Center(
      child: Column(
        children: [
         const Text('我是文本'),
          RaisedButton(onPressed: (){
            setState(() {
            });
          })
        ],
      ),
    );

2.避免更改组件树的结构和组件的类型

有如下场景，有一个 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) : Container(),
          _showButton ? RaisedButton(onPressed: null) : Text(''),
          Container(),
        ],
      ),
    );
  }

优化如下:

bool _showButton = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
            Visibility(
            visible: _showButton,
            child: RaisedButton(onPressed: null),
          ),
            Offstage(
            offstage: !_showButton,
            child: RaisedButton(onPressed: null),
          ),
          Container(),
        ],
      ),
    );
  }

还有一种情况是根据不同的条件构建不同的组件，如下：

bool _showButton = true;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          _showButton ? RaisedButton(onPressed: null) : Container('另一个组件'),
          Container(),
        ],
      ),
    );
  }

上面两张情况组件树发生了更改，不管是类型发生更改，还是深度发生更改，如果无法避免，对于比较复杂的组件可以将变化的组件树封装为一个 StatefulWidget 组件，且设置 GlobalKey
虽然通过 GlobalKey 的做法提高了性能，但基于管理 GlobalKey 的成本很高，所以其他需要使用 Key 的地方建议考虑使用 Key, ValueKey, ObjectKey, 和 UniqueKey。

3.关于ListView 的优化

ListView是我们最常用的组件之一，用于展示数据的列表。一般如果我们要展示的数据量较大尽量使用 ListView.builder 或者 ListView.separated，不要直接使用如下方式：
ListView( children: <Widget>[ item,item1,item2,... ], )，这种方式会一次加载所有的组件，没有“懒加载”，性能消耗较大。ListView 中 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可以指定listview子元素的长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能（因为它可以帮助ListView在未实际渲染子元素之前就计算出每一项元素的位置），如果不设置 itemExtent 属性，将会由子组件自己决定大小，对于加载数据量较大的情况下，大量的计算导致UI堵塞就会发生卡顿现象

4.谨慎的使用一些组件

• Clip类组件是常用的裁剪类组件，比如：ClipOval、ClipPath、ClipRRect、ClipRect、CustomClipper。
  一些简单的圆角组件的设置可以使用 Container 实现：设置BoxDecration中的borderRadius属性

Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
              'https://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 组件的功能是使子组件透明
  对于除0.0和1.0之外的不透明度值，此类相对昂贵，因为它需要将子级绘制到中间缓冲区中。 对于值0.0，根本不绘制子级。 对于值1.0，将立即绘制没有中间缓冲区的子对象。
  如果仅仅是对单个 Image 或者 Color 增加透明度，直接使用：
  Container(color: Color.fromRGBO(255, 0, 0, 0.5))
  比 Opacity 组件更快
  Opacity(opacity: 0.5, child: Container(color: Colors.red))