Flutter streambuilder vs futurebuilder

Question

有人请解释一下streambuilder和futurebuilder之间的主要区别.我真的很困惑.

• 使用什么以及何时使用？

• 他们打算执行哪些任务？

• 他们每个人如何监听动态列表中的更改？

Answer 1

双方StreamBuilder并FutureBuilder具有相同的行为:他们倾听他们各自的对象上的变化.并在收到新值通知时触发新构建.

所以最后,他们的不同之处在于他们听的对象是如何工作的.

Future就像Promise在JS或Taskc#中一样.它们是异步请求的表示.Futures只有一个回应.常见的用法Future是处理http调用.你能听到的Future是它的状态.无论是完成,成功完成还是出错.但就是这样.

Stream另一方面,就像IteratorJS中的异步一样.这可以被同化为可以随时间变化的值.它通常是Web套接字或事件(例如单击)的表示.通过倾听Stream你将获得每个新值,以及是否Stream有错误或完成.

他们每个人如何监听动态列表中的更改？

A Future听不到变量的变化.这是一次性的回应.相反,你需要使用一个Stream.

Answer 2

我发现有时现实世界的类比可以很好地解释/记住概念。这是一个 - 它并不完美，但对我有帮助。

想象一下，您正身处其中一间现代寿司餐厅，在那里您有一条腰带，环绕着房间，上面放着寿司船。你只要坐下来，等一个人经过，就抓着它吃。但他们也允许您订购。

一个未来就像是令牌与一些就可以了，他们给你当你订购外卖; 您提出了请求，但结果尚未准备好，但您有一个占位符。当结果准备好时，您会收到回电（外卖柜台上方的数字板会显示您的号码或他们喊出来）-您现在可以进去拿食物（结果）取出。

A Stream就像那条带小寿司碗的腰带。坐在那张桌子旁，你就“订阅”了这个流。你不知道下一艘寿司船什么时候到达——但是当厨师（消息源）将它放在流（带）中时，订阅者就会收到它。需要注意的重要一点是，它们是异步到达的（您不知道下一条船/消息何时到来），但它们会按顺序到达（即，如果厨师按某种顺序将三种类型的寿司放在腰带上——你会看到他们以同样的顺序来到你身边）

从编码的角度来看——Futures 和 Streams 都可以帮助您处理异步（事情不会立即发生，并且您不知道发出请求后什么时候会得到结果）。

不同之处在于 Futures 是关于一次性请求/响应（我问，有一个延迟，我收到一个通知，我的 Future 准备收集，我完成了！）而 Streams 是一系列连续的响应单个请求（我问，有延迟，然后我不断收到响应，直到流干涸或我决定关闭它并走开）。

希望有帮助。

Answer 3

FutureBuilder 用于一次响应，例如从Camera拍摄图像，从本机平台获取一次数据（例如获取设备电池），获取文件引用，发出http请求等。

另一方面，StreamBuilder用于多次获取某些数据，例如听位置更新，播放音乐，秒表等。

这是完整的示例，其中提到了两种情况。

FutureBuilder 求解一个平方值，并在5秒钟后返回结果，直到那时我们向用户显示进度指示器。

StreamBuilder显示秒表，_count每秒将值增加1。

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0; // used by StreamBuilder

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildFutureBuilder(),
          SizedBox(height: 24),
          _buildStreamBuilder(),
        ],
      ),
    );
  }

  // constructing FutureBuilder
  Widget _buildFutureBuilder() {
    return Center(
      child: FutureBuilder<int>(
        future: _calculateSquare(10),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done)
            return Text("Square = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by FutureBuilder
  Future<int> _calculateSquare(int num) async {
    await Future.delayed(Duration(seconds: 5));
    return num * num;
  }

  // constructing StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder<int>(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Stopwatch = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by StreamBuilder
  Stream<int> _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}

Answer 4

Flutter中的StreamBuilder和FutureBuilder小部件都允许您构建响应异步数据更改的反应式 UI。但是，它们在用法和处理的数据类型方面存在一些差异。

当您想要异步检索不会随时间变化的单条数据 时，例如对用户信息的网络请求，可以使用FutureBuilder小部件。它期望 Future 作为其数据源，当 Future 完成时，它会使用结果数据重建 widget 树。

另一方面，当您想要显示可以随时间变化的数据（例如实时聊天应用程序）时，可以使用StreamBuilder小部件。它期望 Stream 作为其数据源，每当有新数据可用时，它就会使用更新的数据重建 widget 树。

以下是其他一些差异：

FutureBuilder有一个 AsyncSnapshot 代表 Future 的当前状态，而StreamBuilder有多个 AsyncSnapshot，每个 AsyncSnapshot 代表 Stream 发出的一条新数据。 FutureBuilder会在每次重新构建widget时执行Future，而StreamBuilder只会在挂载widget时订阅Stream一次，并在widget被释放时取消订阅。这是使用 FutureBuilder 的示例：

FutureBuilder<String>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
);

这是使用 StreamBuilder 的示例：

StreamBuilder<int>(
  stream: countStream(),
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    } else {
      return CircularProgressIndicator();
    }
  },
);

综上所述，FutureBuilder用于一次性异步数据检索，而StreamBuilder用于显示持续更新的数据。