Flutter Widget 006: FutureBuilder

1.概要

大多数情况下，我们的一个页面是需要根据网络请求返回的结果来决定是如何显示的，比如网络请求失败时显示请求失败，无网络时显示无网络，请求中显示请求中等等需求。这些需求，我们都是可以通过网络请求的Future来实现，但是，Flutter给我们提供了一个非常方便的FutureBuilder来实现根据Future状态来实现界面的方式。

在FutureBuilder的builder里面，我们能够根据当前状态来实现界面的显示内容。

2.源码

FutureBuilder({
    Key key,
    // 指定的耗时任务
    this.future,
    // 初始化的数据，可用于设置默认数据
    this.initialData,
    // Widget构造器，会被多次执行，在该构造器内，我们可以实现根据不同的状态，实现不同界面内容的显示
    @required this.builder,
  })

3.示例

Widget build(BuildContext context) => FutureBuilder(
        future: fetchData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            debugPrint('构建Widget: ${snapshot.data}');
            // 通过数据构建界面
            return Center(child: Container(child: Text('hasData: ${snapshot.data}')));
          } else {
            // 显示加载Loading，直到数据返回时停止
            debugPrint('构建加载Loading');
            return CircularProgressIndicator();
          }
        },
      );

  Future<bool> fetchData() => Future.delayed(Duration(seconds: 1), () {
        debugPrint('拉取数据');
        return true;
      });

4.注意事项

class _MyHomePageState extends State<MyHomePage> {
  Future<bool> _data;

  @override
  void initState() {
    super.initState();
    // 这里，将fecthData返回的Future用属性存储起来
    _data = fetchData();
  }

  @override
  Widget build(BuildContext context) => FutureBuilder(
        initialData: false,
        future: _data,
        ...
      );

 ...

  Future<bool> fetchData() => Future.delayed(Duration(seconds: 1), () {
        return true;
      });
}

0 条评论