Flutter局部刷新优化性能

局部刷新优化性能

Flutter状态类：

• StatelessWidget：无状态类，没有状态更新，界面一经建立没法更改；
• StatefulWidget：有状态类，当状态改变，调用 setState()方法会触发 StatefulWidget的UI状态更新，自定义继承 StatefulWidget的子类须重写 createState()方法。

案例：

当咱们调用有状态类的setState方法时会遍历每个子Widget的State.build刷新状态， 这将是一笔很大的性能开销，因此咱们须要使用局部刷新来进行优化。

普通刷新方式

class TestRoute extends StatefulWidget {
  @override
  _TestRouteState createState() => _TestRouteState();
}

class _TestRouteState extends State<TestRoute> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return new FlatButton(
      onPressed: () {
        setState(() => count++);
      },
      child: new Text('$count'),
    );
  }
}

一个有状态类定义一个变量而后按钮的事件调用setState让这个变量进行刷新，

使用GlobalKey局部刷新方式

咱们仍是用上面的例子，只是经过GlobalKey的方式只刷新局部的Text，

class TestRoute extends StatefulWidget {
  @override
  _TestRouteState createState() => _TestRouteState();
}

class _TestRouteState extends State<TestRoute> {
  int count = 0;

  GlobalKey<TextWidgetState> textKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new TextWidget(textKey), //须要更新的Text
        new FlatButton(
          onPressed: () {
            count++; // 这里咱们只给他值变更，状态刷新交给下面的Key事件
            textKey.currentState.onPressed(count);
          },
          child: new Text('按钮 $count'),
        ),
      ],
    );
  }
}

// 封装的文本组件Widget
class TextWidget extends StatefulWidget {
  final Key key;

  // 接收一个Key
  TextWidget(this.key);

  @override
  State<StatefulWidget> createState() => TextWidgetState();
}

class TextWidgetState extends State<TextWidget> {
  String _text = "0";

  @override
  Widget build(BuildContext context) {
    return new Text(_text);
  }

  void onPressed(int count) {
    setState(() => _text = count.toString());
  }
}

效果：

能够明显的看到按钮的count并没有变更，但须要更新的文本组件更新了值，已经完美实现了局部刷新。

实现原理：

textKey是一个GlobalKey类型的Key范型为TextWidgetState（封装的文本&&有状态类）， 因此这个Key能够经过currentState方法调用到类里面的onPressed方法， 而onPressed方法恰好有调用setState来刷新局部状态。

本文分享自微信公众号 - flutter开发精选（Study_Knowledge）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。