Flutter Widget 之StreamBuilder

现在应用程序很高的不同步。任何事物都可以在任何时间、任何顺序发生。你可以用数据串流的形式来想象这些事件。

Dart对一步数据流提供了强大的支持，使用streams

Stream<int> count() async* {
    int i = 1;
    while (true) {
        yield i++;
    }
}

你怎么在Flutter App里面使用streams呢？

使用StreamBuilder widget

StreamBuilder<int>(
    stream: _myStream,
    builder: _myBuilderFunction,
)

StreamBuilder会坚挺来自stream的事件，每个新的事件，rebuild场景，给予他们最新的事件来一起工作。

通过给StreamBuilder一个stream，只要连接上就好

StreamBuilder(
    stream: _myStream,
    ...
)

然后再写一个builder。

给一个snapshot来显示这部分显示成什么样子

StreamBuilder(
    stream: _myStream,
    builder: (context, snapshot) {
        return MyWidget(snapshot.data);
    },
);

你可以给一个默认的数据，然后当你的widget在等待第一个事件的时候就有东西可以展示。

StreamBuilder(
    stream: _myStream,
    initialData: 42,
    builder: (context, snapshot) {
        return MyWidget(snapshot.data);
    },
);

否则，确认你查询过snapshot有数据，如果没有的话，你可以呈现一个载入中的图标

StreamBuilder(
    stream: _myStream,
    initialData: 42,
    builder: (context, snapshot) {
        if (!snapshot.hasData) {
            return CircularProgressIndicator();
        }
        return MyWidget(snapshot.data);
    },
);

更多内容请参考ConnectionState

StreamBuilder(
    stream: _myStream,
    builder: (context, snapshot) {
        switch (snapshot.connectionState) {
            case ConnectionState.waiting:
            case ConnectionState.none:
                return LinearProgressIndicator();
            case ConnectionState.active:
                return MyWidget(snapshot.data);
            case ConnectionState.done:
                return MyFInalWidget(snapshot.data);
        }
    },
);

应该永远检查错误，snapshot.hasError是您的朋友

StreamBuilder(
    stream: _myStream,
    builder: (context, snapshot) {
        if (snapshot.hasError) {
            return UnOh(snapshot.error);
        }
        ...
    },
);

你可以使用StreamBuilder从Firebase的数据、传感器事件甚至是网络连接状况

如果想了解有关StreamBuilder的内容，或者关于Flutter的其他功能，请访问flutter.io

原文翻译自视频：视频地址