Flutter切换Stream时StreamBuilder不更新的问题求助

项目从TMDB获取三类电影数据（Now Playing、Scheduled、Popular），已成功获取数据。现有3个Stream，希望通过按钮切换对应的StreamBuilder展示数据，但切换后界面不更新。

相关代码 #

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:movie_infomation/blocs/movie_bloc.dart';
import 'package:movie_infomation/blocs/tab_button_bloc.dart';
import 'package:movie_infomation/models/item_model.dart';

class MovieViewWidget extends StatefulWidget {


  MovieViewWidget({Key? key}) : super(key: key);


  @override
  State<MovieViewWidget> createState() => _MovieViewWidgetState();
}

class _MovieViewWidgetState extends State<MovieViewWidget> {

  int selectedIndex = 0;
  int index = 0;
  Stream<ItemModel> _stream = movieBloc.nowplayingAllMovies;

  @override
  void initState() {
    // TODO: implement initState
    tabButtonBloc.stateStream.listen((state) {
      setState(() {
        selectedIndex = state.selectedIndex;
        index++;

        if(selectedIndex == 0){
          _stream = movieBloc.nowplayingAllMovies;
        }
        else if(selectedIndex == 1){
          _stream = movieBloc.upcommingAllMovies;
        }
        else{
          _stream = movieBloc.popularAllMovies;
        }

      });
    });
    super.initState();
  }


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

  _getStream() async {
    if(selectedIndex == 0){
      _stream = movieBloc.nowplayingAllMovies;
    }
    else if(selectedIndex == 1){
      _stream = movieBloc.upcommingAllMovies;
    }
    else{
      _stream = movieBloc.popularAllMovies;
    }
  }

  @override
  Widget build(BuildContext context) {
    Size _size = MediaQuery.of(context).size;
    _getStream();

    print('selectedIndex: $selectedIndex');
    print('_stream: $_stream');

    return StreamBuilder(
      stream: _stream,
      builder: (context, AsyncSnapshot<ItemModel> snapshot) {
        if(snapshot.connectionState == ConnectionState.waiting){
          return const CircularProgressIndicator();
        }
        else if (snapshot.hasData) {
          return GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: snapshot.data?.results.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: _size.width / _size.height,
            ),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.all(_size.width * 0.01),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.network(
                    'https://image.tmdb.org/t/p/w185${snapshot.data?.results[index].poster_path}',
                    fit: BoxFit.fill,
                  ),
                ),
              );
            },
          );
        }
        else if(snapshot.hasError){
          print('snapshot error');
        }

          return const Text('???');
      },
    );
  }
}

打印结果 #

flutter: selectedIndex: 0
flutter: _stream: Instance of '_BroadcastStream<ItemModel>'
flutter: selectedIndex: 0
flutter: _stream: Instance of '_BroadcastStream<ItemModel>'
flutter: selectedIndex: 1
flutter: _stream: Instance of '_BroadcastStream<ItemModel>'
flutter: selectedIndex: 2
flutter: _stream: Instance of '_BroadcastStream<ItemModel>'

问题原因 #

StreamBuilder一旦绑定某个Stream，就会持续监听该Stream的事件。直接修改_stream变量指向新的Stream，不会触发StreamBuilder重新订阅新流——因为Flutter认为Widget的配置没有变化，不会重建StreamBuilder。

解决办法 #

方法1：给StreamBuilder添加唯一Key（最简单） #

通过给StreamBuilder设置与selectedIndex绑定的Key，每次切换索引时，Flutter会认为这是一个全新的Widget，从而销毁旧的StreamBuilder并创建新的，自动订阅对应的新Stream：

@override
Widget build(BuildContext context) {
  Size _size = MediaQuery.of(context).size;

  print('selectedIndex: $selectedIndex');

  return StreamBuilder(
    key: ValueKey(selectedIndex), // 新增：用选中索引作为唯一Key
    stream: selectedIndex == 0 
        ? movieBloc.nowplayingAllMovies 
        : selectedIndex == 1 
            ? movieBloc.upcommingAllMovies 
            : movieBloc.popularAllMovies,
    builder: (context, AsyncSnapshot<ItemModel> snapshot) {
      // 原有builder逻辑保持不变
      if(snapshot.connectionState == ConnectionState.waiting){
        return const CircularProgressIndicator();
      }
      else if (snapshot.hasData) {
        return GridView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          itemCount: snapshot.data?.results.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: _size.width / _size.height,
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              padding: EdgeInsets.all(_size.width * 0.01),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16.0),
                child: Image.network(
                  'https://image.tmdb.org/t/p/w185${snapshot.data?.results[index].poster_path}',
                  fit: BoxFit.fill,
                ),
              ),
            );
          },
        );
      }
      else if(snapshot.hasError){
        print('snapshot error');
      }

      return const Text('???');
    },
  );
}

同时可以删除无用的_getStream()方法和_stream成员变量，简化代码。

方法2：用StreamController做中间代理 #

创建一个代理StreamController，切换索引时将对应Stream的事件转发到代理流，让StreamBuilder始终监听这个代理流：

class _MovieViewWidgetState extends State<MovieViewWidget> {
  int selectedIndex = 0;
  late final StreamController<ItemModel> _proxyController;
  Stream<ItemModel> get _stream => _proxyController.stream;

  @override
  void initState() {
    super.initState();
    _proxyController = StreamController<ItemModel>.broadcast();
    // 初始订阅第一个流
    _bindStream(movieBloc.nowplayingAllMovies);
    
    tabButtonBloc.stateStream.listen((state) {
      setState(() {
        selectedIndex = state.selectedIndex;
        // 切换到对应流
        _bindStream(
          selectedIndex == 0 ? movieBloc.nowplayingAllMovies :
          selectedIndex == 1 ? movieBloc.upcommingAllMovies :
          movieBloc.popularAllMovies
        );
      });
    });
  }

  void _bindStream(Stream<ItemModel> newStream) {
    // 先清空之前的订阅（避免内存泄漏）
    _proxyController.close();
    _proxyController = StreamController<ItemModel>.broadcast();
    // 将新流的事件转发到代理
    newStream.listen((data) {
      if (!_proxyController.isClosed) {
        _proxyController.add(data);
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    Size _size = MediaQuery.of(context).size;

    print('selectedIndex: $selectedIndex');

    return StreamBuilder(
      stream: _stream,
      builder: (context, AsyncSnapshot<ItemModel> snapshot) {
        // 原有builder逻辑不变
        if(snapshot.connectionState == ConnectionState.waiting){
          return const CircularProgressIndicator();
        }
        else if (snapshot.hasData) {
          return GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: snapshot.data?.results.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              childAspectRatio: _size.width / _size.height,
            ),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: EdgeInsets.all(_size.width * 0.01),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(16.0),
                  child: Image.network(
                    'https://image.tmdb.org/t/p/w185${snapshot.data?.results[index].poster_path}',
                    fit: BoxFit.fill,
                  ),
                ),
              );
            },
          );
        }
        else if(snapshot.hasError){
          print('snapshot error');
        }

        return const Text('???');
      },
    );
  }
}

额外优化建议 #

• 确保movieBloc中的三个Stream是广播流，如果不是，可通过stream.asBroadcastStream()转换，避免多个订阅者冲突。
• 移除代码中无用的index变量，减少冗余。

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