Flutter中TextField获焦时状态自动更新问题求助

问题根源 #

你遇到的情况是因为每次TextField状态变化（获取焦点、输入内容）都会触发StatefulWidget的build方法重新执行，而如果你的FutureBuilder的future参数是直接在build里创建的（比如future: fetchData(filter1, filter2)），那每次build都会重新调用这个异步方法，也就是触发搜索。

解决方案 #

1. 用变量存储搜索Future，仅在点击按钮时更新

把搜索的Future单独存在状态变量里，只有点击搜索按钮时才重新赋值，这样只有按钮点击才会触发FutureBuilder执行搜索：

class _YourPageState extends State<YourPage> {
  final TextEditingController _controller1 = TextEditingController();
  final TextEditingController _controller2 = TextEditingController();
  Future<List<YourData>>? _searchFuture; // 存储搜索任务

  // 搜索方法
  Future<List<YourData>> _performSearch() async {
    final filter1 = _controller1.text;
    final filter2 = _controller2.text;
    return await yourApiCall(filter1, filter2);
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(controller: _controller1),
        TextFormField(controller: _controller2),
        ElevatedButton(
          onPressed: () {
            setState(() {
              _searchFuture = _performSearch(); // 点击按钮才更新Future
            });
          },
          child: const Text('搜索'),
        ),
        FutureBuilder<List<YourData>>(
          future: _searchFuture, // 使用状态变量里的Future
          builder: (context, snapshot) {
            // 你的UI构建逻辑
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('错误: ${snapshot.error}');
            } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
              return const Text('无数据');
            } else {
              return ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(snapshot.data![index].name));
                },
              );
            }
          },
        ),
      ],
    );
  }
}

2. 避免TextField触发不必要的setState

如果你的TextFormField绑定了Form组件或开启了自动验证，可能会导致频繁触发setState。可以：

• 关闭自动验证：给TextFormField添加autovalidateMode: AutovalidateMode.disabled，只在点击搜索时再手动验证表单。
• 不要在TextFormField的回调（比如onChanged）中调用setState（你当前没设置，但后续添加逻辑时需要注意）。

3. 初始化时加载默认数据（可选）

如果需要页面初始化时就加载默认数据，可以在initState里初始化搜索任务：

@override
void initState() {
  super.initState();
  _searchFuture = _performSearch(); // 初始加载默认数据
}

关键原理 #

FutureBuilder会在future对象引用变化时重新执行异步任务。通过把future存在状态变量里，只有点击按钮时才更新这个变量，就能完全控制搜索的触发时机，TextField的任何状态变化都不会触发搜索。

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