Flutter使用StreamController遇屏幕旋转报错及黑屏问题求助

问题根源 #

1. 单订阅流限制：普通StreamController是单订阅流，屏幕旋转触发Widget重建后，StreamBuilder会再次尝试监听同一个流，导致抛出Bad state: Stream has already been listened to错误。
2. 广播流无缓存：改成.broadcast()后，虽然支持多订阅，但广播流不会保留之前发射的数据，Widget重建后新监听无法获取历史数据，因此出现屏幕空白。

解决方案 #

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

BehaviorSubject属于rxdart库，它支持多订阅，且会自动保留最新发射的数值，新订阅者能立即拿到最新数据，完美适配屏幕旋转场景。

1. 添加rxdart依赖到pubspec.yaml：

dependencies:
  rxdart: ^0.27.7

2. 修改ViewModel实现：

import 'package:rxdart/rxdart.dart';

class ProductViewModel {
  // 用BehaviorSubject替代普通StreamController
  final BehaviorSubject<ViewObject> _streamController = BehaviorSubject<ViewObject>();
  
  // 对外暴露可监听的流
  Stream<ViewObject> get viewObjectStream => _streamController.stream;

  // 模拟数据加载逻辑
  void loadProductData() {
    // 这里替换为实际的电商数据请求逻辑
    final viewObject = ViewObject(/* 初始化数据 */);
    _streamController.add(viewObject);
  }

  // 务必在页面销毁时关闭流，避免内存泄漏
  void dispose() {
    _streamController.close();
  }
}

3. 在页面中持有ViewModel实例（确保屏幕旋转时ViewModel不被销毁）：

class ProductPage extends StatefulWidget {
  @override
  _ProductPageState createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> {
  late ProductViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = ProductViewModel();
    _viewModel.loadProductData();
  }

  @override
  void dispose() {
    _viewModel.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<ViewObject>(
        stream: _viewModel.viewObjectStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 渲染你的电商UI，比如商品列表/详情
            return Text(snapshot.data!.toString());
          } else if (snapshot.hasError) {
            return Text('加载失败：${snapshot.error}');
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

方案2：自定义带缓存的广播流（无需第三方库）

如果不想引入rxdart，可以手动实现带缓存的广播流：

class ProductViewModel {
  final StreamController<ViewObject> _streamController = StreamController<ViewObject>.broadcast();
  ViewObject? _latestData;

  Stream<ViewObject> get viewObjectStream {
    return _streamController.stream.transform(StreamTransformer.fromHandlers(
      handleListen: (sink) {
        // 新订阅时先发送缓存的最新数据
        if (_latestData != null) {
          sink.add(_latestData!);
        }
        // 转发后续流数据
        _streamController.stream.listen(
          (data) => sink.add(data),
          onError: sink.addError,
          onDone: sink.close,
        );
      },
    ));
  }

  void loadProductData() {
    final viewObject = ViewObject(/* 初始化数据 */);
    _latestData = viewObject;
    _streamController.add(viewObject);
  }

  void dispose() {
    _streamController.close();
  }
}

页面层的使用方式和方案1一致。

核心注意点 #

• 必须保证ViewModel实例在屏幕旋转时不被销毁：通过StatefulWidget的State持有ViewModel，或使用Provider、GetX等状态管理工具的持久化实例功能。
• 无论使用哪种方案，都要在页面销毁时调用dispose()关闭流，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Abdul Rehman