Flutter FutureBuilder内TextField无响应、Future重复执行问题求助

直接在FutureBuilder的future参数中调用fetchVehicles()，会导致所属Widget每次重绘时都生成新的Future实例，触发FutureBuilder重新执行加载流程。点击TextField唤起输入法时会触发页面布局重绘，因此会出现反复加载、原有TextField被销毁重建的问题，你看到的InputConnection相关警告也正是因为TextField被销毁后，输入法找不到原有的输入绑定对象导致的。

将Future实例提前缓存，避免每次build都重新发起请求，操作如下：

• 在当前State类中声明Future<List<Vehicle>>类型的成员变量
• 在initState生命周期中仅执行一次fetchVehicles()为该变量赋值
• 将缓存的变量传给FutureBuilder的future参数

class _YourPageState extends State<YourPage> {
  // 缓存Future实例
  late Future<List<Vehicle>> _vehiclesFuture;

  @override
  void initState() {
    super.initState();
    // 页面初始化时仅发起一次请求
    _vehiclesFuture = fetchVehicles();
  }

  Widget initView(double width) {
    return Container(
      child: FutureBuilder(
        // 传入缓存的Future，不要直接调用fetchVehicles()
        future: _vehiclesFuture,
        builder: (BuildContext context, AsyncSnapshot<List<Vehicle>> snapShotData) {
          switch (snapShotData.connectionState) {
            case ConnectionState.waiting:
              return loadingView();
            case ConnectionState.done:
              return TextField();
            default:
              return loadingView();
          }
        },
      ),
    );
  }

  Future<List<Vehicle>> fetchVehicles() async {
    List<Vehicle> vehicles = await APIService.fetchVehicles();
    return vehicles;
  }
}

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