Flutter：TextField聚焦触发FutureBuilder重建及列表更新异常问题

问题原因 #

1. 最初直接在FutureBuilder的future参数中调用_getAllRoom()，组件每次重建（比如TextField获取焦点触发的重建）都会重新执行这个异步请求，造成不必要的重复调用。
2. 改成late final myFuture = _getAllRoom()后，这个Future仅在State初始化时执行一次，后续即使Firestore数据更新，也不会重新触发_getAllRoom()拉取新数据，导致房间列表无法同步更新。

解决方案 #

方案1：用StreamBuilder监听Firestore实时更新

Firestore支持实时数据监听，改用StreamBuilder可以自动同步数据变化，无需手动触发刷新，同时避免组件重建带来的重复请求：

// 替换TestRoomState中的FutureBuilder为StreamBuilder
StreamBuilder<List<RoomModel>>(
  stream: RoomService().getAllRoomModelStream("userName"), // 需在RoomService中实现实时流方法
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    }
    if (snapshot.hasError) {
      return Text("加载出错：${snapshot.error}");
    }
    final roomModels = snapshot.data ?? [];
    return Expanded(
      child: TestList1(
        isTablet: _isTablet,
        roomModels: roomModels,
        isListStyle1: true,
      ),
    );
  },
)

在RoomService中添加实时流方法：

Stream<List<RoomModel>> getAllRoomModelStream(String userName) {
  return FirebaseFirestore.instance
      .collection("rooms") // 替换为你的Firestore集合名
      .where("userName", isEqualTo: userName)
      .snapshots()
      .map((querySnapshot) {
        return querySnapshot.docs.map((doc) => RoomModel.fromDoc(doc)).toList();
      });
}

Firestore数据更新时会自动推送新数据，组件会同步刷新。

方案2：手动控制Future刷新（保留FutureBuilder）

如果不想用StreamBuilder，可以手动管理Future实例，在需要刷新时重新赋值并触发setState：

class _TestRoomState extends State<TestRoom> {
  List<RoomModel> _roomModels = [];
  TextEditingController _textEditingController = TextEditingController();
  bool _isTablet = false;
  late Future<List<RoomModel>> _myFuture; // 不要用final，允许重新赋值

  @override
  void initState() {
    super.initState();
    _myFuture = _getAllRoom(); // 初始化时执行一次
  }

  // 手动触发刷新的方法
  void _refreshRooms() {
    setState(() {
      _myFuture = _getAllRoom(); // 重新赋值Future，触发FutureBuilder重新执行
    });
  }

  // 修改_getAllRoom，直接返回数据而非修改State变量
  Future<List<RoomModel>> _getAllRoom() async {
    return await RoomService().getAllRoomModel("userName");
  }

  @override
  Widget build(BuildContext context) {
    // ... 其他代码不变
    FutureBuilder<List<RoomModel>>(
      future: _myFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasData) {
          return Expanded(
            child: TestList1(
              isTablet: _isTablet,
              roomModels: snapshot.data!,
              isListStyle1: true,
            ),
          );
        }
        return const Text("暂无房间数据");
      },
    );
  }
}

可以在需要的地方调用_refreshRooms()，比如给AppBar加个刷新按钮：

appBar: AppBar(
  actions: [
    IconButton(
      icon: const Icon(Icons.refresh),
      onPressed: _refreshRooms,
    ),
  ],
),

也可以在修改房间名称等操作后调用，同步最新数据。

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