flutter异步UI更新

异步UI更新

很多时候我们会依赖一些异步数据来动态更新UI，比如在打开一个页面时我们需要先从互联网上获取数据，在获取数据的过程中我们显示一个加载框，等获取到数据时我们再渲染页面；又比如我们想展示Stream（比如文件流、互联网数据接收流）的进度。

之前已经介绍过 Dart 中的异步操作主要是 Future 和 Stream,也介绍了相关的用法，这片文章将介绍与之对应的构建异步UI的两个方法 FutureBuilder 与 StreamBuilder。

FutureBuilder

Future 必须在更早之前获取，例如在State.initState、State.didUpdateWidget 或 State.didChangeDependencies 期间得到。它不能在构造 FutureBuilder 时调用 State.build 或 StatelessWidget.build 方法时创建。如果 Future 是与 FutureBuilder 同时创建的，那么每当 FutureBuilder 的父节点重建时，异步任务就会重新启动。

构建方法：

const FutureBuilder<T>({
Key? key,
required Future<T>? future, // FutureBuilder依赖的Future，通常是一个异步耗时任务
T? initialData, // 初始数据，用户设置默认数据
required AsyncWidgetBuilder<T> builder // Widget构建器；该构建器会在Future执行的不同阶段被多次调用
})

AsyncWidgetBuilder<T> = Widget Function(
    BuildContext context,
    AsyncSnapshot<T> snapshot
)

snapshot会包含当前异步任务的状态信息及结果信息 ，比如我们可以通过snapshot.connectionState获取异步任务的状态信息, 通过snapshot.hasError判断异步任务是否有错误等等，完整的定义读者可以查看AsyncSnapshot类定义。另外，FutureBuilder的builder函数签名和StreamBuilder的builder是相同的。

查看源码可知 snapshot.connectionState 属性是一个枚举，用于表示异步操作的连接状态：

• ConnectionState.none：表示异步操作未启动，或者 Future 对象尚未创建。
• ConnectionState.waiting：表示异步操作正在进行中，等待 Future 完成。
• ConnectionState.active：（用于Stream）表示数据流处于活动状态，已经开始发送事件。在接收到第一个事件之后，connectionState 的值将变为 active,但是还没有完成。
• ConnectionState.done：表示异步操作已经完成或抛出了异常。

可以根据状态返回不同的UI：

FutureBuilder<String>(
  future: myFuture,
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        return Text('Data: ${snapshot.data}');
      } else if (snapshot.hasError) {
        return Text('Error: ${snapshot.error}');
      }
    }

    return Text('Press the button to start');
  },
)

完整代码示例

// 以下代码在 State 中
  
late Future<List<Album>> futureAlbums;

// 这是一段从接口获取数据，并转换成 List<Album> 的方法
Future<List<Album>> fetchAlbum() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
      HttpHeaders.authorizationHeader: 'Basic your_api_token_here',
    },
  );

  if (response.statusCode == 200) {
    // 如果服务器返回了 200 OK 响应，则解析 JSON。
    final List<dynamic> jsonList = jsonDecode(response.body);
    return jsonList.map((json) => Album.fromJson(json)).toList();
  } else {
    // 如果服务器未返回 200 OK 响应，则抛出异常。
    throw Exception('Failed to load album');
  }
}

@override
void initState() {
  super.initState();
  futureAlbums = fetchAlbum(); // 在 initState 时获取 Future
}

...

Widget build(BuildContext context) {
  return Center(
     child: FutureBuilder<List<Album>>(
            future: futureAlbums,
            builder: (context, AsyncSnapshot snapshot) {
              // 有数据
              if (snapshot.hasData) {
                return Scrollbar(
                    child: ListView.builder(
                  itemCount: snapshot.data!.length,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Text(snapshot.data![index].title),
                    );
                  },
                ));
                // 发生错误
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              // 默认情况下展示一个加载中的进度条
              return const CircularProgressIndicator();
            },
          );
  );
}

StreamBuilder

我们知道，在Dart中Stream 也是用于接收异步事件数据，和Future 不同的是，它可以接收多个异步操作的结果，它常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等。StreamBuilder正是用于配合Stream来展示流上事件（数据）变化的UI组件。

构建方法：

const StreamBuilder<T>({
    Key? key,
    T? initialData, // 初始数据，用户设置默认数据
    required Stream<T>? stream, // 依赖的一个 Stream
    required AsyncWidgetBuilder<T> builder // 与 FutureBuilder 相同，只是 connectionState 中的 active 状态需要特殊注意
})

创建一个异步数据流，每隔1秒发送一个数据，获取10个数字（0-9）。

// 以下代码在 State 中
final Stream<int> counterStream = Stream.periodic(const Duration(seconds: 1), (count) => count).take(10);

final broadcastStreamController = StreamController<int>.broadcast(); // 广播类型的 Stream，可以被多个监听

@override
  void initState() {
    super.initState();
    futureAlbums = fetchAlbum();
    // pipe() 是 Stream 类的一个方法，用于将一个流连接到另一个流。它会将源流中的事件转发到目标流中，以实现数据传递
    counterStream.pipe(broadcastStreamController);
}

Widget build(BuildContext context) {
   return Center(
     child: StreamBuilder<int>(
              stream: broadcastStreamController.stream,
              builder: (context, AsyncSnapshot<int> snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.waiting:
                    return const Text('waiting');
                  case ConnectionState.none:
                    return const Text('none');
                  case ConnectionState.active:
                    // 每次数据发送都会重新 build，更新ui
                    return Text('Count: ${snapshot.data}');
                  case ConnectionState.done:
                    return const Text('done');
                }
              },
            );
    
   );
}