Flutter中StreamBuilder始终处于ConnectionState.waiting状态问题求助

问题描述 #

• 应用启动时，若Stream为空，StreamBuilder持续卡在ConnectionState.waiting状态，无法显示空数据提示
• 切换到"second"标签页再返回"first"标签页后，即便Stream已有数据，StreamBuilder仍卡在ConnectionState.waiting，需点击添加按钮才会加载所有数据
• 使用非broadcast模式的StreamController时，返回第一个标签页会触发"无法多次监听流"的错误

问题根源 #

1. 初始无数据发送：启动时没有向Stream发送任何数据，StreamBuilder一直处于等待状态
2. Broadcast流无缓存：broadcast类型的StreamController不会缓存已发送的事件，当Tab切换导致StreamBuilder重建并重新订阅时，无法获取之前发送的数据

解决方案 #

方案1：使用BehaviorSubject（推荐，基于rxdart） #

BehaviorSubject会自动缓存最新的事件，新订阅者会立即收到最新数据，同时初始化时发送空列表解决启动等待问题。

步骤1：添加依赖

在pubspec.yaml中添加rxdart依赖：

dependencies:
  flutter:
    sdk: flutter
  rxdart: ^0.27.7 # 可替换为最新版本

步骤2：修改代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 用BehaviorSubject替代broadcast StreamController
  final BehaviorSubject<List<String>> streamController = BehaviorSubject<List<String>>();
  List<String> list = [];

  @override
  void initState() {
    super.initState();
    // 发送初始空列表，避免启动时等待
    streamController.sink.add(list);
  }

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

  int i = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(0),
            child: Container(
              height: 30,
              width: MediaQuery.of(context).size.width,
              child: TabBar(
                  labelColor: Theme.of(context).iconTheme.color,
                  indicatorColor: Colors.green.shade600,
                  tabs: const [
                    Tab(text: 'first'),
                    Tab(text: 'second'),
                  ]),
            ),
          ),
        ),
        body: TabBarView(children: [
          tasks(),
          const Center(child: Text('SECOND TAB'))
        ]),
        floatingActionButton: TextButton(
            onPressed: () {
              list.add('data ${++i}');
              streamController.sink.add(list);
            },
            child: const Icon(Icons.add)),
      ),
    );
  }

  Padding tasks() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 5),
      child: Column(
        children: [
          Expanded(
              child: StreamBuilder(
                  stream: streamController.stream,
                  builder: (context, snapshot) {
                    if (!snapshot.hasData || snapshot.data!.isEmpty) {
                      return const Center(child: Text('There is no data'));
                    }
                    return ListView.builder(
                        itemCount: snapshot.data!.length,
                        itemBuilder: (context, index) => Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                snapshot.data![index],
                                style: const TextStyle(fontSize: 25),
                              ),
                            ));
                  })),
        ],
      ),
    );
  }
}

方案2：手动维护最新值（无需第三方包） #

如果不想引入rxdart，可以手动缓存最新数据，在新订阅时主动发送：

// 修改StreamController相关代码
final StreamController<List<String>> streamController = StreamController<List<String>>.broadcast();
List<String> latestList = [];

@override
void initState() {
  super.initState();
  latestList = list;
  streamController.sink.add(latestList);
}

// 添加数据时更新最新值
floatingActionButton: TextButton(
    onPressed: () {
      list.add('data ${++i}');
      latestList = List.from(list); // 复制列表避免引用问题
      streamController.sink.add(latestList);
    },
    child: const Icon(Icons.add)),

// 修改StreamBuilder的stream
StreamBuilder(
  stream: streamController.stream.transform(StreamTransformer.fromHandlers(
    handleListen: (sink) {
      // 新订阅时主动发送最新值
      sink.add(latestList);
      streamController.stream.listen(sink.add);
    },
  )),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (!snapshot.hasData || snapshot.data!.isEmpty) {
      return const Center(child: Text('There is no data'));
    }
    return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) => Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                snapshot.data![index],
                style: const TextStyle(fontSize: 25),
              ),
            ));
  },
)

说明 #

• BehaviorSubject方案更简洁可靠，是Flutter中处理这类流状态问题的常用方案
• 两种方案都解决了初始等待和Tab切换后无数据的问题，同时避免了多次监听流的错误

内容的提问来源于stack exchange，提问作者YOKH UOS.C.S