概念StreamBuilder是 Flutter 中用于将异步数据流Stream与 UI 连接起来的 Widget。它会监听一个 Stream当 Stream 发出新数据时自动重建 UI1.Stream数据流 2.StreamController数据控制器 3.AsyncSnapshot快照构造函数StreamBuilderT( Key? key, // 可选Widget标识 StreamT? stream, // 必填数据流 T? initialData, // 可选初始数据 required AsyncWidgetBuilderT builder, // 必填构建函数 )泛型说明// T 是数据的类型 StreamBuilderint // 数据是 int StreamBuilderString // 数据是 String StreamBuilderListUser // 数据是 ListUser StreamBuilderdynamic // 数据类型不确定不推荐为什么需要StreamBuilder// 传统方式手动监听 setState Streamint stream ...; StreamSubscription subscription; override void initState() { subscription stream.listen((data) { setState(() { _data data; // ⚠️ 每次都要手动更新 }); }); } // StreamBuilder 方式自动处理 StreamBuilderint( stream: stream, builder: (context, snapshot) { return Text(${snapshot.data}); // ✅ 自动更新 }, )snapshot结构class AsyncSnapshotT { ConnectionState connectionState; // 连接状态 T? data; // 当前数据 Object? error; // 错误信息 StackTrace? stackTrace; // 错误堆栈 // 常用属性 bool get hasData data ! null; bool get hasError error ! null; } ConnectionState的四种状态 enum ConnectionState { none, // 初始状态Stream 尚未连接 waiting, // 等待数据Stream 已连接但还没有数据 active, // 活跃状态正在接收数据流 done, // 已完成Stream 已关闭 } ┌─────────────────────────────────────────────────────────────────┐ │ ConnectionState 转换 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ │ │ │ none │ ← 初始化时 │ │ └────┬─────┘ │ │ │ stream 有数据 │ │ ▼ │ │ ┌──────────┐ │ │ │ waiting │ ← 等待第一个数据 │ │ └────┬─────┘ │ │ │ 收到第一个数据 │ │ ▼ │ │ ┌──────────┐ │ │ │ active │ ← 持续接收数据 │ │ └────┬─────┘ │ │ │ Stream 关闭 │ │ ▼ │ │ ┌──────────┐ │ │ │ done │ ← 结束状态 │ │ └──────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘snapshot检查清单// ✅ 完整的 snapshot 检查 StreamBuilderString( stream: stream, builder: (context, snapshot) { // 1️⃣ 检查连接状态 if (snapshot.connectionState ConnectionState.none) { return Text(未连接); } // 2️⃣ 检查等待状态 if (snapshot.connectionState ConnectionState.waiting) { return CircularProgressIndicator(); } // 3️⃣ 检查错误 if (snapshot.hasError) { return Text(错误: ${snapshot.error}); } // 4️⃣ 检查数据 if (snapshot.hasData) { return Text(${snapshot.data}); } // 5️⃣ 默认 return Text(无数据); }, )生命周期图示┌─────────────────────────────────────────────────────────────────┐ │ 生命周期 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 1️⃣ Widget 创建 │ │ ↓ │ │ 2️⃣ 监听 Stream自动 │ │ ↓ │ │ 3️⃣ 收到数据 → builder() 被调用 → UI 更新 │ │ ↓ │ │ 4️⃣ 收到新数据 → builder() 再次被调用 → UI 再次更新 │ │ ↓ │ │ 5️⃣ Stream 关闭 → builder() 最后一次被调用 → UI 显示 done 状态 │ │ ↓ │ │ 6️⃣ Widget 销毁 → 自动取消订阅不需要手动操作 │ │ │ └─────────────────────────────────────────────────────────────────┘核心要点1️⃣ 定义 StreamController数据管道 2️⃣ 通过 .add() 放入数据 3️⃣ StreamBuilder 监听并显示数据 4️⃣ 处理所有状态none/waiting/active/done 5️⃣ 处理错误hasError 6️⃣ 记得关闭 StreamController案例练习链接Flutter---StreamBuilder案例-CSDN博客