Flutter使用Stream更新Widget UI

通过之前的两节课，相信你应该已经掌握了Stream的使用。这节课我们来看下如何使用在Flutter中使用Stream来更新Widget UI。
不过在这之前，我们可以先看下Flutter常规刷新界面的操作，通过对比我们能了解Stream的优势。

setState

当我们在Studio中创建一个Flutter项目时，Studio会默认给我们创建如下代码

从图中红色框的指示可以看出，在 FloatingActionButton 的点击事件中，调用了_incrementCounter方法，然后在这个方法中调用了setState方法。

官方对setState方法的解释

setState 方法是在Flutter SDK中的framework.dart中定义的，这个方法的作用是执行build()方法来重新构建此State的Widget。简单来说就是每调用一次setState方法，相对应的Widget显示内容都会被刷新。

运行效果如下：

接下来我在之前的两个方法中分别添加一些打印日志：

  void _incrementCounter() {
    print('_incrementCounter()');
    setState(() {
      print('setState()');
      _counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    print('_MyHomePageState build()');
    return Scaffold(
      。。。
    );
  }

则会每次点击FloatingActionButton时，都会打印：

I/flutter (10361): _incrementCounter
I/flutter (10361): setState
I/flutter (10361): _MyHomePageState build

StreamBuilder

每次都调用build()方法重新构建Widget，难免影响性能。因此我们可以考虑使用Stream来刷新UI，在Flutter中我们并不直接操作Stream类，Flutter为我们提供了一个很方便的类叫 StreamBuilder，这个类的构造函数中需要传入以下几个参数

1. stream：一个Stream对象。
2. initialData：builder函数中snapshot.data的默认值
3. builder：是一个名字为builder的函数，在此函数中根据Stream对象中的数据返回需要显示的Widget。

将_MyHomePageState做如下修改：

代码稍作解释：在构造Scaffold布局的时候，在body的child中不再使用Column，而是使用StreamBuilder(可以猜到StreamBuilder其实也是一个StatefulWidget)，然后在FloatingActionButton点击事件中，直接向Stream中添加数据，然后StreamBuilder中的builder函数就会被自动回调，并根据返回新的Widget刷新UI。

这会再点击FloatingActionButton并不会打印整个State的build方法，而是只打印如下日志：

I/flutter (10949): StreamBuilder builder

扫描二维码，查看更多Flutter文章
也可以发私信申请加入 "Flutter 讨论群"