如何自动获取stories集合所有文档ID并按条件展示图片

1. 编写获取所有Stories文档ID的方法 #

先实现异步方法，从stories集合拉取所有文档ID：

Future<List<String>> getAllStoryDocIds() async {
  final querySnapshot = await FirebaseFirestore.instance.collection('stories').get();
  return querySnapshot.docs.map((doc) => doc.id).toList();
}

2. 改造FutureBuilder并实现条件筛选 #

替换手动传入文档ID的方式，用上述方法获取所有ID后，根据isAddStory的值筛选目标用户ID：

• 当isAddStory = true：只保留当前用户的ID
• 当isAddStory = false：排除当前用户的ID，保留其他所有用户ID

3. 用CachedNetworkImage展示图片 #

结合Firestore查询获取对应userStories子集合的storyUrl，用CachedNetworkImage实现带缓存的图片加载，同时处理加载、错误状态。

完整示例代码 #

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';

Widget buildStoryList(bool isAddStory) {
  final currentUserId = FirebaseAuth.instance.currentUser?.uid;

  return FutureBuilder<List<String>>(
    future: getAllStoryDocIds(),
    builder: (context, snapshot) {
      // 加载中状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      }

      // 无数据或错误状态
      if (snapshot.hasError || !snapshot.hasData || snapshot.data!.isEmpty) {
        return const Center(child: Text('暂无动态'));
      }

      // 根据isAddStory筛选目标文档ID
      final filteredDocIds = isAddStory
          ? snapshot.data!.where((id) => id == currentUserId).toList()
          : snapshot.data!.where((id) => id != currentUserId).toList();

      if (filteredDocIds.isEmpty) {
        return const Center(child: Text('暂无内容'));
      }

      // 渲染故事列表
      return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: filteredDocIds.length,
        itemBuilder: (context, index) {
          final targetUserId = filteredDocIds[index];
          return FutureBuilder<DocumentSnapshot>(
            // 查询对应用户的userStories子集合文档
            future: FirebaseFirestore.instance
                .collection('stories')
                .doc(targetUserId)
                .collection('userStories')
                .doc(targetUserId) // 此处需根据实际Firestore结构调整文档ID
                .get(),
            builder: (context, storySnapshot) {
              if (storySnapshot.connectionState == ConnectionState.waiting) {
                return const CircleAvatar(child: CircularProgressIndicator());
              }

              if (!storySnapshot.hasData || !storySnapshot.data!.exists) {
                return const CircleAvatar(child: Icon(Icons.error));
              }

              final storyUrl = storySnapshot.data!['storyUrl'];
              if (storyUrl == null) {
                return const CircleAvatar(child: Icon(Icons.image_not_supported));
              }

              // 用CachedNetworkImage展示图片
              return CachedNetworkImage(
                imageUrl: storyUrl,
                imageBuilder: (context, imageProvider) => CircleAvatar(
                  backgroundImage: imageProvider,
                  radius: 30,
                ),
                placeholder: (context, url) => const CircleAvatar(child: CircularProgressIndicator()),
                errorWidget: (context, url, error) => const CircleAvatar(child: Icon(Icons.error)),
              );
            },
          );
        },
      );
    },
  );
}

// 获取stories集合下所有文档ID
Future<List<String>> getAllStoryDocIds() async {
  final querySnapshot = await FirebaseFirestore.instance.collection('stories').get();
  return querySnapshot.docs.map((doc) => doc.id).toList();
}

注意事项 #

• 请确保Firestore数据结构与代码匹配：如果userStories子集合的文档ID不是用户ID，需要调整查询路径
• 需在pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.0 # 使用最新版本
  firebase_core: ^2.24.2
  cloud_firestore: ^4.14.0
  firebase_auth: ^4.16.0

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