Flutter中如何实现StreamProvider的暂停与恢复功能？

问题根因 #

你当前将StreamProvider注册在App全局根节点，流的生命周期和App完全一致，所以切换页面不会停止运行。StreamProvider本身默认只会在自身被销毁时自动取消订阅，没有直接暴露暂停/恢复的方法，要实现需求可以用以下两种方案：

方案1：手动控制流启停（适合多页面共用汇率数据的场景） #

通过ChangeNotifier封装CurrencyService，主动控制流的暂停、恢复、销毁逻辑：

改造控制层 #

import 'package:flutter/foundation.dart';

class CurrencyService extends ChangeNotifier {
  Currency? _currency;
  StreamSubscription<Currency?>? _streamSubscription;
  Currency? get currentCurrency => _currency;

  // 启动流
  void startStream() {
    // 避免重复创建流
    _streamSubscription?.cancel();
    _streamSubscription = Stream.periodic(const Duration(seconds: 60), (_) async {
      return await getCurrencyData();
    }).listen((event) async {
      _currency = await event;
      notifyListeners();
    });
  }

  // 暂停流
  void pauseStream() {
    _streamSubscription?.pause();
  }

  // 恢复流
  void resumeStream() {
    _streamSubscription?.resume();
  }

  // 销毁流
  void cancelStream() {
    _streamSubscription?.cancel();
    _streamSubscription = null;
  }

  Future<Currency?> getCurrencyData() async {
    try {
      // 原有API调用逻辑保持不变
      // ...
    } catch (e) {
      print('Error: $e');
    }
    return _currency;
  }

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

改造全局Provider注册 #

把原来的全局StreamProvider替换为ChangeNotifierProvider：

void main() async {
  // 预加载初始数据
  final currencyService = CurrencyService();
  final initialCurrency = await currencyService.getCurrencyData();
  currencyService._currency = initialCurrency;

  runApp(
    MultiProvider(
      providers: [
        // 原有其他Provider保持不变
        ChangeNotifierProvider<CurrencyService>(
          create: (_) => currencyService,
        ),
      ],
      child: const TestApp(),
    ),
  );
}

改造仪表盘视图 #

改为StatefulWidget监听页面生命周期，自动控制流启停：

class DashboardView extends StatefulWidget {
  const DashboardView({Key? key}) : super(key: key);

  @override
  State<DashboardView> createState() => _DashboardViewState();
}

class _DashboardViewState extends State<DashboardView> {
  @override
  void initState() {
    super.initState();
    final service = Provider.of<CurrencyService>(context, listen: false);
    if (service._streamSubscription?.isPaused == true) {
      service.resumeStream();
    } else {
      service.startStream();
    }
  }

  @override
  void dispose() {
    Provider.of<CurrencyService>(context, listen: false).pauseStream();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Consumer<CurrencyService>(
        builder: (context, service, child) {
          final currency = service.currentCurrency;
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('${currency?.base ?? ''}${currency?.quote ?? ''}'),
                Text('${currency?.rate ?? ''}'),
              ],
            ),
          );
        },
      ),
    );
  }
}

方案2：局部注册StreamProvider（适合仅仪表盘使用汇率数据的场景） #

如果只有仪表盘页面需要用到汇率数据，直接把StreamProvider从全局移到DashboardView内部即可，页面销毁时Provider会自动取消流，返回时重新创建流自动重启，无需手动控制：

// 先删除全局注册的StreamProvider<Currency?>
// 改造DashboardView的build方法
@override
Widget build(BuildContext context) {
  return StreamProvider<Currency?>(
    create: (_) => CurrencyService().currencyStream,
    initialData: CurrencyService().currentCurrency,
    child: Scaffold(
      // 原有Consumer渲染逻辑保持不变
    ),
  );
}

内容的提问来源于stack exchange，提问作者dave.tdv