Flutter中实现输入时实时过滤StreamBuilder展示的Firestore数据

一、给CustomTextField添加onChanged回调 #

首先扩展你的CustomTextField组件，添加onChanged参数并传递给内部的TextField，这样就能在外部监听文本变化：

class CustomTextField extends StatelessWidget {
  final String hint;
  final bool isitpassword;
  final TextEditingController controller;
  // 新增onChanged回调参数
  final ValueChanged<String>? onChanged;

  const CustomTextField({
    Key? key,
    required this.hint,
    this.isitpassword = false,
    required this.controller,
    this.onChanged, // 加入构造函数
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(20),
        ),
        child: TextField(
          style: TextStyle(fontSize: 20, color: Colors.white),
          controller: controller,
          obscureText: isitpassword,
          // 将外部传递的onChanged绑定到内部TextField
          onChanged: onChanged,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: hint,
            suffixIcon: IconButton(
              icon: Icon(Icons.close, color: Colors.white),
              onPressed: () {
                controller.text = '';
                // 清空文本时也要触发回调，确保流同步更新
                onChanged?.call('');
              },
            ),
          ),
        ),
      ),
    );
  }
}

二、实现实时搜索（无需点击按钮） #

推荐用ValueNotifier结合ValueListenableBuilder的方案，简单高效且避免不必要的组件重建：

1. 在页面State类中定义ValueNotifier #

class YourPageState extends State<YourPage> {
  final TextEditingController txtsearchcontroller = TextEditingController();
  // 用ValueNotifier保存搜索关键词，自动监听变化
  final ValueNotifier<String> _searchQuery = ValueNotifier('');

  @override
  void dispose() {
    txtsearchcontroller.dispose();
    _searchQuery.dispose(); // 记得释放资源
    super.dispose();
  }

  // ... 其他页面逻辑
}

2. 绑定CustomTextField的onChanged回调 #

CustomTextField(
  hint: 'Search Email',
  controller: txtsearchcontroller,
  onChanged: (value) {
    _searchQuery.value = value;
  },
)

3. 用ValueListenableBuilder包裹StreamBuilder #

这样每次搜索关键词变化时，会自动重建StreamBuilder并请求对应Firestore数据：

ValueListenableBuilder<String>(
  valueListenable: _searchQuery,
  builder: (context, query, child) {
    return StreamBuilder<QuerySnapshot>(
      stream: query.isEmpty
          ? FirebaseFirestore.instance.collection('chatusers').snapshots()
          : FirebaseFirestore.instance.collection('chatusers').where(
              "email",
              isEqualTo: query,
              isNotEqualTo: widget.usermodel.email,
            ).snapshots(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
          if (snapshot.hasData) {
            QuerySnapshot querysnapshot = snapshot.data!;
            if (querysnapshot.docs.isNotEmpty) {
              // 优化List转换：用map替代手动for循环
              List<Map<String, dynamic>> maplist = querysnapshot.docs
                  .map((doc) => doc.data() as Map<String, dynamic>)
                  .toList();

              return Expanded(
                child: CustomListView(maplist: maplist),
              );
            } else {
              return Text('未找到用户');
            }
          } else if (snapshot.hasError) {
            return Text('出现错误');
          } else {
            return Text('暂无数据');
          }
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  },
)

三、额外优化建议 #

• 添加防抖逻辑：输入时延迟300ms再发起查询，避免频繁请求Firestore：

  onChanged: (value) {
    Future.delayed(const Duration(milliseconds: 300), () {
      // 确保当前输入框内容和触发回调的内容一致，避免延迟期间输入新内容导致的无效请求
      if (txtsearchcontroller.text == value) {
        _searchQuery.value = value;
      }
    });
  },
  

• 移除原有的搜索按钮，因为已经实现实时搜索。

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