Flutter 性能优化细节

2021-05-08 本文已影响0人 KB_MORE

1.重建最小化原则

在调用 setState() 方法重建组件时，一定要最小化重建组件，没有变化的组件不要重建

图片.png
点击按钮调用setstate, 可以看到每次重建的widget, 需要变化的组件尽量抽取

不变组件建议加上const, 在调用setstate时,也是不会重建
涉及组件间通信,可以使用provider,及GetX

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

有如下场景，有一个 Text 组件有可见和不可见两种状态，代码如下：

bool _visible = true;

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

可见时组件树

不可见时组件树.png

要避免组件树结构发生变化

使用Visibility来隐藏和显示组件.png

3.关于listview-的优化)关于ListView 的优化

ListView是我们最常用的组件之一，用于展示大量数据的列表。如果展示大量数据请使用 ListView.builder 或者 ListView.separated，千万不要直接使用如下方式：

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

这种方式一次加载所有的组件，没有“懒加载”，消耗极大的性能。

4.关于 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,),
  )

5.谨慎的使用一些组件

部分组件一定要谨慎使用，因为这些组件包含一些昂贵的操作，比如 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(
              '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),
      ),
    )

image

# 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