如何用Firestore QuerySnapshot替换Flutter静态列表并实现多字段搜索

原代码问题梳理 #

1. 使用StatelessWidget但依赖全局状态，状态管理逻辑混乱
2. 重复嵌套StreamBuilder，冗余且易引发状态异常
3. 存在类型不匹配问题（User与MyUser混用）
4. 搜索仅支持firstName字段，未覆盖需求的多字段搜索
5. 未处理StreamController资源释放，存在内存泄漏风险

修复后完整代码 #

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

// 确保MyUser实体类定义正确
class MyUser {
  final String? firstName;
  final String? lastName;
  final String? nickName;

  MyUser({this.firstName, this.lastName, this.nickName});

  // 从Firestore文档转换为实体对象
  factory MyUser.fromJson(Map<String, dynamic> json) {
    return MyUser(
      firstName: json['firstName'],
      lastName: json['lastName'],
      nickName: json['nickName'],
    );
  }
}

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

  @override
  State<SearchWidget> createState() => _SearchWidgetState();
}

class _SearchWidgetState extends State<SearchWidget> {
  final StreamController<List<MyUser>> _streamController = StreamController<List<MyUser>>();
  late List<MyUser> _allUsers; // 存储从Firestore获取的全量用户数据

  @override
  void initState() {
    super.initState();
    _loadAllUsers(); // 初始化时加载全部用户数据
  }

  @override
  void dispose() {
    _streamController.close(); // 释放StreamController资源，避免内存泄漏
    super.dispose();
  }

  // 从Firestore加载全量用户数据
  Future<void> _loadAllUsers() async {
    final querySnapshot = await FirebaseFirestore.instance.collection('users').get();
    _allUsers = querySnapshot.docs
        .map((doc) => MyUser.fromJson(doc.data() as Map<String, dynamic>))
        .toList();
    _streamController.sink.add(_allUsers); // 初始状态发送全量数据
  }

  // 多字段搜索过滤逻辑
  void _filter(String searchQuery) {
    if (searchQuery.isEmpty) {
      _streamController.sink.add(_allUsers); // 搜索为空时返回全量数据
      return;
    }

    final lowerQuery = searchQuery.toLowerCase();
    final filteredUsers = _allUsers.where((user) {
      // 检查firstName、lastName、nickName是否包含搜索关键词
      final matchesFirstName = user.firstName?.toLowerCase().contains(lowerQuery) ?? false;
      final matchesLastName = user.lastName?.toLowerCase().contains(lowerQuery) ?? false;
      final matchesNickName = user.nickName?.toLowerCase().contains(lowerQuery) ?? false;
      return matchesFirstName || matchesLastName || matchesNickName;
    }).toList();

    _streamController.sink.add(filteredUsers);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: <Widget>[
          TextField(
            onChanged: _filter,
            decoration: const InputDecoration(
              hintText: '搜索姓名/昵称...',
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 16),
          StreamBuilder<List<MyUser>>(
            stream: _streamController.stream,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const CircularProgressIndicator(); // 加载中状态提示
              }

              if (!snapshot.hasData || snapshot.data!.isEmpty) {
                return const Text('暂无用户数据'); // 空数据状态提示
              }

              return ListView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(), // 解决嵌套滚动冲突
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final user = snapshot.data![index];
                  return ListTile(
                    title: Text('${user.firstName} ${user.lastName}'),
                    subtitle: Text(user.nickName ?? '无昵称'),
                  );
                },
              );
            },
          )
        ],
      ),
    );
  }
}

关键实现说明 #

• 状态管理优化：改用StatefulWidget统一管理状态，将StreamController和全量数据放在State中，确保资源正常释放
• 多字段搜索：在过滤逻辑中同时校验firstName、lastName、nickName三个字段，满足多维度搜索需求
• Firestore数据处理：初始化时一次性加载全量数据到内存，搜索时直接在内存中过滤，减少Firestore请求次数（若数据量过大，可考虑Firestore端模糊搜索，需额外配置索引）
• UI体验完善：添加加载中、空数据状态提示，优化输入框样式，使用ListTile提升列表展示效果，解决嵌套滚动冲突

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