Flutter中如何通过ID从Firebase实时数据库子节点查询数据并在ListView.Builder展示

核心思路 #

先获取所有帖子数据，再根据帖子中的hostId批量获取对应用户数据，最后将两者匹配后传入ListView展示。以下是具体实现步骤：

1. 定义数据模型类 #

先封装Post和User的数据模型，方便后续解析处理：

class Post {
  final String id;
  final String title;
  final String hostId;
  final List<String> tags;

  Post({
    required this.id,
    required this.title,
    required this.hostId,
    required this.tags,
  });

  factory Post.fromMap(Map<String, dynamic> map, String id) {
    return Post(
      id: id,
      title: map['title'] ?? '',
      hostId: map['hostId'] ?? '',
      tags: List<String>.from(map['tags'] ?? []),
    );
  }
}

class UserModel {
  final String id;
  final String name;
  final String avatarUrl;

  UserModel({
    required this.id,
    required this.name,
    required this.avatarUrl,
  });

  factory UserModel.fromMap(Map<String, dynamic> map, String id) {
    return UserModel(
      id: id,
      name: map['name'] ?? '匿名用户',
      avatarUrl: map['avatarUrl'] ?? '',
    );
  }
}

2. 编写数据查询方法 #

实现一个异步方法，先拉取所有帖子，再批量获取关联用户，最后组合数据：

import 'package:firebase_database/firebase_database.dart';

Future<List<Map<String, dynamic>>> fetchPostsWithUsers() async {
  final dbRef = FirebaseDatabase.instance.ref();

  // 1. 获取所有帖子数据
  final postsSnapshot = await dbRef.child('posts').get();
  if (!postsSnapshot.exists) return [];

  final postsMap = postsSnapshot.value as Map<dynamic, dynamic>;
  List<Post> posts = [];
  for (var entry in postsMap.entries) {
    posts.add(Post.fromMap(entry.value as Map<String, dynamic>, entry.key as String));
  }

  // 2. 批量获取关联用户（去重减少请求次数）
  final uniqueHostIds = posts.map((post) => post.hostId).toSet().toList();
  final userFutures = uniqueHostIds.map((id) => dbRef.child('users/$id').get()).toList();
  final userSnapshots = await Future.wait(userFutures);

  List<UserModel> users = [];
  for (int i = 0; i < uniqueHostIds.length; i++) {
    final snapshot = userSnapshots[i];
    if (snapshot.exists) {
      users.add(UserModel.fromMap(snapshot.value as Map<String, dynamic>, uniqueHostIds[i]));
    }
  }

  // 3. 匹配帖子与用户
  return posts.map((post) {
    final matchedUser = users.firstWhere(
      (user) => user.id == post.hostId,
      orElse: () => UserModel(id: post.hostId, name: '未知用户', avatarUrl: ''),
    );
    return {'post': post, 'user': matchedUser};
  }).toList();
}

3. 在FutureBuilder中展示数据 #

将查询方法传入FutureBuilder，构建ListView：

FutureBuilder<List<Map<String, dynamic>>>(
  future: fetchPostsWithUsers(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Center(child: Text('加载失败：${snapshot.error}'));
    }
    final dataList = snapshot.data ?? [];

    return ListView.builder(
      itemCount: dataList.length,
      itemBuilder: (context, index) {
        final post = dataList[index]['post'] as Post;
        final user = dataList[index]['user'] as UserModel;

        return Card(
          margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
          child: Padding(
            padding: const EdgeInsets.all(12),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  children: [
                    CircleAvatar(
                      backgroundImage: user.avatarUrl.isNotEmpty
                          ? NetworkImage(user.avatarUrl)
                          : null,
                      child: user.avatarUrl.isEmpty ? Text(user.name[0]) : null,
                    ),
                    const SizedBox(width: 10),
                    Text(user.name, style: const TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
                const SizedBox(height: 8),
                Text(post.title, style: const TextStyle(fontSize: 16)),
                const SizedBox(height: 6),
                Wrap(
                  spacing: 6,
                  children: post.tags.map((tag) => Chip(label: Text(tag))).toList(),
                ),
              ],
            ),
          ),
        );
      },
    );
  },
)

优化建议 #

• 实时数据监听：如果需要实时同步数据，可改用StreamBuilder，将查询方法改为返回Stream，利用Firebase的实时监听能力自动更新UI。
• 数据冗余优化：对于高频展示的用户信息（如用户名、头像），可以在存储帖子时直接冗余这些字段，避免每次查询都要拉取用户节点，提升性能。
• 权限检查：确保Firebase实时数据库规则允许读取posts和users节点，否则会出现权限错误。

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