Flutter/Firebase：点击TextField弹出键盘触发组件重建问题求助

问题场景 #

当前代码通过StreamBuilder从Firestore读取用户数据并展示username字段，但同一组件内的TextField触发键盘弹出/关闭时，会导致组件重建，进而重复发起Firestore数据请求，产生不必要的资源消耗。

解决思路 #

核心是将Stream的创建移出build方法，避免每次重建都生成新的Stream实例；同时可结合状态保持机制，进一步稳定Stream连接。

1. 提前初始化Stream实例 #

在State类的初始化阶段创建Firestore的Stream对象，而非在build方法内临时创建，这样组件重建时会复用同一个Stream，不会重复发起请求。

2. 可选：保持组件状态（多页面/场景切换时推荐） #

让State类混入AutomaticKeepAliveClientMixin，重写wantKeepAlive返回true，确保组件在不可见时不会被销毁，避免Stream连接断开重连。

修改后的完整代码 #

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import '../models/user.dart';

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

  @override
  State<Admin> createState() => _AdminState();
}

class _AdminState extends State<Admin> with AutomaticKeepAliveClientMixin {
  final TextEditingController _userController = TextEditingController();
  // 提前初始化Stream，避免build方法重复创建
  late final Stream<QuerySnapshot<Map<String, dynamic>>> _usersStream;

  @override
  void initState() {
    super.initState();
    _usersStream = FirebaseFirestore.instance
        .collection('users')
        .limit(1)
        .snapshots();
  }

  // 重写该方法，保持组件状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    // 配合AutomaticKeepAliveClientMixin必须调用super.build
    super.build(context);
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
            elevation: 4,
            toolbarHeight: 50,
            backgroundColor: Colors.white,
            actions: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                width: MediaQuery.of(context).size.width,
                child: const Text('Admin',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        letterSpacing: 0.3,
                        fontWeight: FontWeight.w500)),
              ),
            ]),
        body: Column(
          children: [
            TextField(
              controller: _userController,
              decoration: InputDecoration(
                labelText: 'User',
              ),
            ),
            StreamBuilder(
              // 使用提前初始化好的Stream
              stream: _usersStream,
              builder: (context,
                  AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const SizedBox.shrink(); // 用更轻量的组件替代空Row
                }
                return snapshot.data?.docs.isNotEmpty == true
                    ? SingleChildScrollView(
                        child: ListView.builder(
                          physics: const NeverScrollableScrollPhysics(),
                          shrinkWrap: true,
                          itemCount: snapshot.data?.docs.length,
                          itemBuilder: (context, index) {
                            User user = User.fromSnap(
                              snapshot.data!.docs[index],
                            );

                            return Text('${user.username}');
                          },
                        ),
                      )
                    : const SizedBox.shrink();
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键改动说明 #

• 将Firestore Stream的初始化移至initState方法，确保组件生命周期内仅创建一次Stream实例，组件重建时复用该Stream，避免重复请求。
• 混入AutomaticKeepAliveClientMixin并设置wantKeepAlive: true，防止组件因页面切换等场景被销毁，稳定Stream连接（单页面场景可省略此步骤）。
• 将占位的Row()替换为SizedBox.shrink()，减少不必要的组件渲染开销。

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