Flutter 中如何使用 StreamBuilder？

推荐答案

在 Flutter 中，StreamBuilder 是一个用于监听 Stream 并自动重建 UI 的组件。它接收一个 Stream 和一个 builder 函数，当 Stream 发出新数据时，builder 函数会被调用，从而更新 UI。

// www.javascriptcn.com code example
StreamBuilder<int>(
  stream: myStream, // 传入一个 Stream
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 数据加载中
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}'); // 发生错误
    } else if (snapshot.hasData) {
      return Text('Data: ${snapshot.data}'); // 显示数据
    } else {
      return Text('No data'); // 没有数据
    }
  },
)

本题详细解读

1. StreamBuilder 的基本用法

StreamBuilder 是一个用于监听 Stream 的组件。它接收两个主要参数：

• stream：一个 Stream 对象，StreamBuilder 会监听这个 Stream 的数据变化。
• builder：一个回调函数，当 Stream 发出新数据时，builder 函数会被调用，并返回一个 Widget 来更新 UI。

2. AsyncSnapshot 的作用

builder 函数的第二个参数是一个 AsyncSnapshot 对象，它包含了 Stream 的当前状态和数据。AsyncSnapshot 提供了以下常用属性：

• connectionState：表示 Stream 的连接状态，如 ConnectionState.waiting、ConnectionState.active 等。
• hasData：表示 Stream 是否已经发出了数据。
• data：Stream 发出的最新数据。
• hasError：表示 Stream 是否发生了错误。
• error：如果 Stream 发生了错误，这里会包含错误信息。

3. 处理不同的状态

在 builder 函数中，通常需要根据 AsyncSnapshot 的状态来处理不同的情况：

• 数据加载中：当 connectionState 为 ConnectionState.waiting 时，可以显示一个加载指示器。
• 发生错误：当 hasError 为 true 时，可以显示错误信息。
• 有数据：当 hasData 为 true 时，可以显示数据。
• 没有数据：当 Stream 没有发出任何数据时，可以显示一个默认的 UI。

4. 示例代码解析

在示例代码中，StreamBuilder 监听了一个 Stream<int>，并根据 AsyncSnapshot 的状态显示不同的 UI：

• 如果 Stream 正在加载数据，显示一个 CircularProgressIndicator。
• 如果 Stream 发生了错误，显示错误信息。
• 如果 Stream 发出了数据，显示数据。
• 如果 Stream 没有数据，显示 "No data"。

5. 注意事项

• StreamBuilder 会自动管理 Stream 的订阅和取消订阅，因此不需要手动管理 StreamSubscription。
• 如果 Stream 是单次发射的（如 Future 转换的 Stream），StreamBuilder 仍然可以正常工作。
• 在使用 StreamBuilder 时，确保 Stream 的生命周期与 StreamBuilder 的生命周期一致，避免内存泄漏。