[flutter]StreamBuilder 如何使用?

 在 Flutter 中使用 StreamBuilder

StreamBuilder 是 Flutter 提供的一个小部件（widget），用于监听 Stream 并在数据更新时自动重建 UI。

---

🛠 基本用法

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

void main() {
  runApp(MaterialApp(home: StreamBuilderExample()));
}

class StreamBuilderExample extends StatefulWidget {
  @override
  _StreamBuilderExampleState createState() => _StreamBuilderExampleState();
}

class _StreamBuilderExampleState extends State<StreamBuilderExample> {
  // 创建一个周期性 Stream，每秒钟发送一个数字
  Stream<int> _counterStream() {
    return Stream.periodic(Duration(seconds: 1), (count) => count);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("StreamBuilder 示例")),
      body: Center(
        child: StreamBuilder<int>(
          stream: _counterStream(), // 绑定 Stream
          initialData: 0, // 初始数据
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Text("等待数据...", style: TextStyle(fontSize: 20));
            }
            if (snapshot.hasError) {
              return Text("发生错误: ${snapshot.error}");
            }
            return Text("计数: ${snapshot.data}", style: TextStyle(fontSize: 30));
          },
        ),
      ),
    );
  }
}

---

代码解析

1. 创建一个 Stream
   • Stream.periodic(Duration(seconds: 1), (count) => count);
   • 每秒钟递增一次并发送新的值。
2. 使用 StreamBuilder 监听 Stream
   • stream: _counterStream() 监听流的数据变化。
   • initialData: 0 设置初始值，防止 UI 初始状态为空。
   • builder 方法：
     • snapshot.connectionState 判断流的连接状态：
       • waiting：等待数据时显示 "等待数据..."
     • snapshot.hasError 处理异常情况。
     • snapshot.data 显示当前流的数据。

---

进阶用法：手动控制 Stream

如果你想手动触发事件，而不是定时触发，可以使用 StreamController。

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

void main() {
  runApp(MaterialApp(home: ManualStreamBuilderExample()));
}

class ManualStreamBuilderExample extends StatefulWidget {
  @override
  _ManualStreamBuilderExampleState createState() => _ManualStreamBuilderExampleState();
}

class _ManualStreamBuilderExampleState extends State<ManualStreamBuilderExample> {
  final StreamController<int> _streamController = StreamController<int>();
  int _counter = 0;

  @override
  void dispose() {
    _streamController.close(); // 关闭 Stream 防止内存泄漏
    super.dispose();
  }

  void _incrementCounter() {
    _counter++;
    _streamController.sink.add(_counter); // 发送数据到 Stream
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("手动触发 Stream")),
      body: Center(
        child: StreamBuilder<int>(
          stream: _streamController.stream,
          initialData: 0,
          builder: (context, snapshot) {
            return Text("计数: ${snapshot.data}", style: TextStyle(fontSize: 30));
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: Icon(Icons.add),
      ),
    );
  }
}

---

总结

✅ StreamBuilder 适用于监听 异步数据流，常用于 WebSockets、计时器、数据库监听等场景。
✅ Stream.periodic() 适合定期触发的流，而 StreamController 适合 手动控制数据流。
✅ 在 dispose() 方法中关闭 StreamController，防止内存泄漏。