Flutter使用StreamBuilder时从二级页面返回后Widget无法刷新如何解决

问题根因 #

你当前的写法存在核心逻辑错误：

• quotesdata.fetchdata().asStream()是将单次Future转换为单订阅Stream，仅会在首次加载时触发一次，后续ViewModel中再次调用fetchdata不会向已创建的旧Stream推送新事件，因此StreamBuilder无法收到更新通知。
• 你同时使用了Provider的ChangeNotifier监听能力和StreamBuilder，二者没有打通，属于冗余实现。

解决方案 #

方案1：弃用冗余的StreamBuilder，直接用Provider监听（改动最小，推荐） #

你的ViewModel已经继承了ChangeNotifier，直接用Consumer监听ViewModel的变化即可实现自动刷新：

1. 页面初始化时触发首次数据加载，在页面State的initState中添加如下代码：

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    Provider.of<HomeViewModel>(context, listen: false).fetchdata();
  });
}

2. 替换原来的StreamBuilder为Consumer组件：

Consumer<HomeViewModel>(
  builder: (context, quotesdata, child) {
    // 可自行添加加载状态、空状态判断逻辑
    if (quotesdata.lines.isNotEmpty) {
      return ScreenShotWidget(
        homeViewModel: quotesdata,
        list: quotesdata.lines,
      );
    } else {
      return const CircularProgressIndicator();
    }
  },
)

你在第二个页面pop时已经调用了fetchdata和notifyListeners，Consumer会自动监听到ViewModel变化并刷新页面，无需额外修改逻辑。

方案2：如果需要保留StreamBuilder，修正Stream实现 #

如果你确实需要使用Stream能力，需要在ViewModel中维护持久的Stream控制器：

1. 改造HomeViewModel，添加Stream相关逻辑：

import 'dart:async';

class HomeViewModel extends ChangeNotifier {
  final _quotesController = StreamController<List<String>>.broadcast();
  List<String> lines = [];

  // 暴露给外部的Stream
  Stream<List<String>> get quotesStream => _quotesController.stream;

  Future<void> fetchdata() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String? category = prefs.getString('category');
    if (category != null) {
      lines = await locator<JsonAPI>().fetchquotes(category);
    } else {
      lines = await locator<JsonAPI>().fetchquotes('quotes');
    }
    // 向Stream推送新数据
    _quotesController.add(lines);
    notifyListeners();
  }

  // 页面销毁时关闭Stream控制器避免内存泄漏
  @override
  void dispose() {
    _quotesController.close();
    super.dispose();
  }
}

2. 修正StreamBuilder的绑定逻辑，绑定持久化的Stream而非单次Future转换的Stream：

StreamBuilder<List<String>>(
  stream: Provider.of<HomeViewModel>(context, listen: false).quotesStream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ScreenShotWidget(
        homeViewModel: Provider.of<HomeViewModel>(context, listen: false),
        list: snapshot.data!,
      );
    } else if (snapshot.hasError) {
      return const Text('加载失败');
    } else {
      return const CircularProgressIndicator();
    }
  },
)

同样需要在页面initState中调用一次fetchdata触发首次加载。

额外优化点 #

你pop时调用的方法中，空的setState() {}没有任何作用，可以直接删除。

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