Flutter中的StreamBuilder和FutureBuilder有什么区别

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

FutureBuilder 简介

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

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

你最好理解这些代码。

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

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

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

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

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>[
          _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++;
    }
  }
}

输出:

结论

总之, StreamBuilderFutureBuilder 都是 Flutter 中重要的 widget,用于处理异步操作并根据结果数据更新 UI。

我希望你现在了解什么是 StreamBuilderFutureBuilder,以及我们为什么和在哪里使用它们 ❤️❤️❤️。


原文:medium.com/@saurabhsin...

相关推荐
孤鸿玉12 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥19 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart