FirebaseFirestore增删记录后如何更新AppBar中的计数？

问题根源在于你当前的numberWaiting仅在初始化时获取一次集合长度，没有和Firestore的实时数据流绑定，导致增删记录时无法同步更新AppBar标题。以下是两种可行的解决方案：

方案一：复用列表Stream，直接从Snapshot获取计数（推荐） #

将整个Scaffold包裹在StreamBuilder中，利用集合的实时数据流同时驱动列表展示和计数更新，无需额外维护状态变量：

class WaitingScreen extends StatefulWidget {
  @override
  _WaitingScreenState createState() => _WaitingScreenState();
}

class _WaitingScreenState extends State<WaitingScreen> {
  final CollectionReference _waitingCollection = FirebaseFirestore.instance.collection('waiting');

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      // 监听waiting集合的实时数据流
      stream: _waitingCollection.snapshots(),
      builder: (context, snapshot) {
        // 根据Snapshot状态计算当前计数
        int waitingCount = snapshot.hasData ? snapshot.data!.docs.length : 0;
        
        return Scaffold(
          appBar: AppBar(
            // 直接使用实时更新的计数
            title: Text('# Waiting: $waitingCount'),
          ),
          body: snapshot.hasData
              ? ListView.builder(
                  itemCount: snapshot.data!.docs.length,
                  itemBuilder: (context, index) {
                    final doc = snapshot.data!.docs[index];
                    // 构建你的列表项
                    return ListTile(
                      title: Text(doc['your_field_name'].toString()),
                    );
                  },
                )
              : const Center(child: CircularProgressIndicator()),
        );
      },
    );
  }
}

优势： #

• 仅订阅一次Firestore数据流，避免重复查询，性能更优
• 代码简洁，无需额外状态管理和订阅清理逻辑

方案二：单独订阅计数数据流 #

如果需要将计数逻辑与列表展示分离，可以通过StreamSubscription单独监听集合变化，手动更新状态变量：

class WaitingScreen extends StatefulWidget {
  @override
  _WaitingScreenState createState() => _WaitingScreenState();
}

class _WaitingScreenState extends State<WaitingScreen> {
  int _numberWaiting = 0;
  late StreamSubscription<QuerySnapshot> _countSubscription;
  final CollectionReference _waitingCollection = FirebaseFirestore.instance.collection('waiting');

  @override
  void initState() {
    super.initState();
    // 订阅集合的实时数据流，更新计数
    _countSubscription = _waitingCollection.snapshots().listen((snapshot) {
      setState(() {
        _numberWaiting = snapshot.docs.length;
      });
    });
  }

  @override
  void dispose() {
    // 页面销毁时取消订阅，避免内存泄漏
    _countSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('# Waiting: $_numberWaiting'),
      ),
      body: StreamBuilder<QuerySnapshot>(
        stream: _waitingCollection.snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) return const CircularProgressIndicator();
          
          return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) {
              final doc = snapshot.data!.docs[index];
              return ListTile(
                title: Text(doc['your_field_name'].toString()),
              );
            },
          );
        },
      ),
    );
  }
}

注意事项： #

• 必须在dispose方法中取消订阅，防止内存泄漏
• 该方式会订阅两次Firestore数据流（一次用于计数，一次用于列表），性能略低于方案一

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