Flutter中的StreamBuilder和FutureBuilder有什么区别

news2024/9/25 23:12:17

流行的跨平台框架 Flutter 为开发人员提供了两个强大的小部件来处理异步操作：StreamBuilder 和 FutureBuilder。尽管它们有相似之处，但了解它们的不同之处，以便为您的特定用例选择合适的一个是至关重要的。在这篇博文中，我们将深入研究这两个小部件的特性和用法，让您全面了解何时使用它们。

FutureBuilder 简介

首先，让我们探索 FutureBuilder ，它是为处理将来返回单个值的异步操作而设计的。请按照以下步骤来利用 FutureBuilder 的强大功能：

当您有一个返回值的一次性异步操作（例如 HTTP 请求或从文件中读取）时，请使用 FutureBuilder 。
导入所需的依赖项：import 'dart:async'; 。
创建一个 Future 对象来表示您要执行的异步操作。例如，您可以使用 http.get() 发出 HTTP 请求并获取响应。
将取决于未来结果的 UI 部分包装在 FutureBuilder 小部件内。

你最好理解这些代码。

打开您的 main.dart 文件并执行此代码，看看输出结果如何。

import 'package:flutter/material.dart';

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(
      appBar: AppBar(
        title: Text('StreamBuilder VS FutureBuilder',style: TextStyle(fontSize: 18,color: Colors.black),),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildFutureBuilder(),

        ],
      ),
    );
  }

  // 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}",style: TextStyle(fontSize: 20,color: Colors.purple),);

          return CircularProgressIndicator(color: Colors.green,);
        },
      ),
    );
  }

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

}

输出：

StreamBuilder 简介

接下来，我们讨论 StreamBuilder ，它适合处理随着时间的推移产生多个值的异步操作。请按照以下步骤有效实施 StreamBuilder ：

当您拥有可随时间变化的异步数据流（例如来自数据库或 Web 服务的实时更新）时，请使用 StreamBuilder 。
导入所需的依赖项：import 'dart:async'; 。
创建一个 Stream 对象来表示您要侦听的数据流。它可以是 StreamController 的实例，或者您可以使用 Stream.fromFuture 或 Stream.periodic 等内置流。
将依赖于 StreamBuilder 小部件内的流数据的 UI 部分包装起来。

好的，如果您看到代码，那么您会更好地理解我在说什么

import 'package:flutter/material.dart';

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(
      appBar: AppBar(
        title: Text('StreamBuilder VS FutureBuilder',style: TextStyle(fontSize: 18,color: Colors.black),),
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildStreamBuilder(),
        ],
      ),
    );
  }

  // constructing StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder<int>(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Stopwatch = ${snapshot.data}",style: TextStyle(fontSize: 20,color: Colors.orange),);
          return CircularProgressIndicator();
        },
      ),
    );
  }
  // used by StreamBuilder
  Stream<int> _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}