Flutter之StreamBuilder入门教程

iOS

2023-05-12 19:31:26

StreamBuilder：Flutter 中的动态 UI 更新工具

原理

StatefulWidget 与 StreamController

StreamBuilder 依赖于两个关键概念：

StatefulWidget： 允许其状态在运行时发生变化，实现动态 UI 更新。
StreamController： 发送数据的对象，在应用程序组件之间传递数据。

StreamBuilder 如何工作

StreamBuilder 订阅 StreamController 发送的数据，并在数据更新时自动更新 UI。这是因为：

StreamBuilder 是一个 StatefulWidget，可以跟踪数据变化。
当数据发生变化时，它会调用其 build() 方法来更新 UI。

用法

使用 StreamBuilder 很简单：

创建一个 StreamController 对象。
在 StreamController 上调用 listen() 方法监听数据变化。
在 StreamBuilder 的 child 属性中指定要更新的 UI 组件。
在 StreamBuilder 的 stream 属性中指定要订阅的 StreamController 对象。

示例

考虑以下示例：

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StreamBuilder Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final StreamController<int> _counterController = StreamController<int>();

  @override
  void initState() {
    super.initState();
    _counterController.sink.add(0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StreamBuilder Example'),
      ),
      body: Center(
        child: StreamBuilder<int>(
          stream: _counterController.stream,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(
                'Counter: ${snapshot.data}',
                style: TextStyle(fontSize: 24),
              );
            } else {
              return Text('Loading...');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _counterController.sink.add(_counterController.value + 1);
        },
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    _counterController.close();
    super.dispose();
  }
}

说明：

创建一个 StreamController 来发送计数器值。
在 StreamBuilder 中订阅 StreamController 并指定要更新的文本组件。
点击按钮时，发送新数据以更新计数器值。

总结

StreamBuilder 是一个功能强大的工具，用于动态更新 UI：

实现实时数据更新
监听用户输入
处理网络请求
控制动画

常见问题解答

什么是 StatefulWidget？
一个可以改变其状态以实现动态 UI 更新的特殊小部件。
StreamBuilder 如何与 StreamController 通信？
它订阅 StreamController 发送的数据，并在数据变化时自动更新 UI。
StreamBuilder 如何实现热重载？
作为 StatefulWidget，StreamBuilder 可以跟踪数据变化并在数据变化时重新构建，实现热重载。
在哪些情况下使用 StreamBuilder？
需要动态更新 UI 的场景，例如：实时数据更新、用户输入、网络请求、动画控制。
为什么 StreamBuilder 是一个有价值的工具？
它简化了动态 UI 更新，实现了交互性和响应性。