FutureBuilder 是 Flutter 中用于构建依据 Future 回来的最新核算快照(Snapshot)的 Widget。运用 FutureBuilder 可以非常方便地依据异步核算的结果来创立 UI。

根本运用

FutureBuilder 主要有两个特点：

  • future：我们要监听的 Future。
  • builder：一个回来 Widget 的回调函数。这个函数的参数包括 BuildContext 和 AsyncSnapshot，其中 AsyncSnapshot 包含了 Future 的核算结果。

运用过程

  1. 界说一个 Future 函数

    这个函数通常用来进行一些异步操作，比方网络恳求。

    Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // 模仿网络推迟
  return "Data fetched";
}

  2. 运用 FutureBuilder

    将界说的 Future 函数与 FutureBuilder 一起运用，依据其履行的结果构建 UI。

    FutureBuilder<String>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    // 判别 Future 是否履行结束
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 回来一个加载指示器
    } else {
      if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      } else {
        return Text('Data: ${snapshot.data}'); // 回来获取的数据
      }
    }
  },
)

示例代码

下面是一个完整的简略示例，运用 FutureBuilder 显现从 Future 获取的数据。

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FutureBuilder Example')),
        body: MyFutureBuilder(),
      ),
    );
  }
}
class MyFutureBuilder extends StatelessWidget {
  // 界说一个 Future 函数来模仿获取数据的操作
  Future<String> fetchData() async {
    await Future.delayed(Duration(seconds: 2)); // 模仿网络推迟
    return "Data fetched";
  }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder<String>(
        future: fetchData(),
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          // 依据 snapshot 的状况回来不同的 Widget
          if (snapshot.connectionState == ConnectionState.waiting) {
            return CircularProgressIndicator(); // 如果 Future 还在运行，回来一个进度指示器
          } else {
            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}'); // 如果 Future 完结且无错误回来数据
            }
          }
        },
      ),
    );
  }
}

注意事项

  • FutureBuilder 的 builder 办法或许会被屡次调用，尤其是在 Future 函数履行的过程中，它或许会调用屡次 builder 来重建 UI。
  • 防止直接在 FutureBuilder 的 future 特点中创立 Future 实例。如果这样做，每次 build 办法履行时，都会创立一个新的 Future 实例，导致不必要的核算。通常将 Future 实例界说为 State 目标的成员变量或者运用 FutureBuilder 的静态结构办法 FutureBuilder.value。