Riverpod：页面不可见时停止监听Firestore集合

你的场景里，集合页面留在导航栈中持续订阅Firestore，导致文档更新时重复读取的问题，可以通过控制集合订阅的激活状态配合页面路由/生命周期监听解决，核心是在页面不可见时让Riverpod自动取消集合流订阅，页面恢复可见时重新订阅。

方案一：路由监听精准控制订阅状态 #

这种方式针对页面导航状态做监听，比应用生命周期监听更精准，仅在页面被新页面覆盖/恢复时触发。

1. 创建订阅状态控制Provider #

定义一个StateProvider作为集合订阅的开关：

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

// 控制集合订阅的启用/禁用状态
final shouldEnableCollectionSubscription = StateProvider<bool>((ref) => true);

2. 修改集合StreamProvider #

让集合订阅依赖开关状态，关闭时返回空流触发autoDispose自动取消Firestore订阅：

final collectionProvider = StreamProvider.autoDispose<QuerySnapshot>((ref) {
  final shouldListen = ref.watch(shouldEnableCollectionSubscription);
  if (!shouldListen) {
    // 返回空流，触发autoDispose销毁之前的Firestore订阅
    return const Stream.empty();
  }
  return FirebaseFirestore.instance.collection("my_collection").snapshots();
});

3. 在集合页面监听路由变化 #

让CollectionPage实现RouteAware，通过RouteObserver监听页面导航状态：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class CollectionPage extends ConsumerStatefulWidget {
  const CollectionPage({super.key});

  @override
  ConsumerState<CollectionPage> createState() => _CollectionPageState();
}

class _CollectionPageState extends ConsumerState<CollectionPage> with RouteAware {
  static final routeObserver = RouteObserver<ModalRoute>();

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 注册路由监听
    routeObserver.subscribe(this, ModalRoute.of(context)!);
  }

  @override
  void didPushNext() {
    // 打开详情页，当前页面被覆盖，关闭集合订阅
    ref.read(shouldEnableCollectionSubscription.notifier).state = false;
  }

  @override
  void didPopNext() {
    // 从详情页返回，当前页面恢复可见，重新开启订阅
    ref.read(shouldEnableCollectionSubscription.notifier).state = true;
  }

  @override
  void dispose() {
    // 取消路由监听
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final collectionAsyncValue = ref.watch(collectionProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('集合页面')),
      body: collectionAsyncValue.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, stack) => Center(child: Text('加载失败: $err')),
        data: (snapshot) {
          return ListView.builder(
            itemCount: snapshot.docs.length,
            itemBuilder: (context, index) {
              final doc = snapshot.docs[index];
              return ListTile(
                title: Text(doc['title']),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DocumentDetailsPage(docId: doc.id),
                    ),
                  );
                },
              );
            },
          );
        },
      ),
    );
  }
}

方案二：应用生命周期监听（适合全局场景） #

如果需要在应用退到后台时也关闭订阅，可以用AppLifecycleListener（Flutter 3.13+推荐）：

1. 复用方案一的订阅开关Provider #

2. 在集合页面监听应用生命周期 #

late final AppLifecycleListener _lifecycleListener;

@override
void initState() {
  super.initState();
  _lifecycleListener = AppLifecycleListener(
    onPause: () {
      // 应用退到后台/页面被覆盖，关闭订阅
      ref.read(shouldEnableCollectionSubscription.notifier).state = false;
    },
    onResume: () {
      // 应用回到前台/页面恢复可见，开启订阅
      ref.read(shouldEnableCollectionSubscription.notifier).state = true;
    },
  );
}

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

为什么不用deactivate()？ #

deactivate()仅在Widget从Widget树中被移除时触发，但页面被推入导航栈时并未被移除，只是不可见，因此无法准确捕捉页面可见性变化，不适合该场景。

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