Flutter局部刷新优化性能

用户1974410

发布于 2022-09-20 16:27:16

1.3K0

发布于 2022-09-20 16:27:16

文章被收录于专栏：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());
  }
}