Flutter中TextFormFields无法显示更新后坐标值的UI刷新问题求助

问题原因 #

TextFormField 的 initialValue 参数仅在组件首次构建时生效，后续调用 setState() 触发UI重建时，该参数不会重新赋值。这就是为什么你的 Text 组件能显示最新坐标，但 TextFormField 始终停留在旧值的核心原因。

解决方案：使用 TextEditingController #

通过 TextEditingController 管理输入框内容，它能在数据变化时主动同步更新输入框显示，是最推荐的解决方式：

1. 定义控制器 #

在你的 State 类中声明两个控制器：

late final TextEditingController _latitudeController;
late final TextEditingController _longitudeController;

2. 初始化与更新控制器 #

在 initState 中完成初始赋值，或者在获取新坐标后同步更新控制器内容：

@override
void initState() {
  super.initState();
  // 初始值绑定
  _latitudeController = TextEditingController(
    text: '${locInMemory.getLatitude()}'
  );
  _longitudeController = TextEditingController(
    text: '${locInMemory.getLongitude()}'
  );
}

// 更新坐标时同步刷新控制器
void updateLocation(NewLocation newLoc) {
  setState(() {
    locInMemory = newLoc;
    _latitudeController.text = '${locInMemory.getLatitude()}';
    _longitudeController.text = '${locInMemory.getLongitude()}';
  });
}

3. 绑定控制器到 TextFormField #

替换掉原来的 initialValue，改用控制器关联输入框：

fields.add(TextFormField(
  controller: _latitudeController,
  decoration: ui.asDecoration(ui.loc.attr_geo_Latitude),
  keyboardType: const TextInputType.numberWithOptions(decimal: true),
));
fields.add(TextFormField(
  controller: _longitudeController,
  decoration: ui.asDecoration(ui.loc.attr_geo_Longitude),
  keyboardType: const TextInputType.numberWithOptions(decimal: true),
));

4. 释放控制器（避免内存泄漏） #

在组件销毁时务必释放控制器资源：

@override
void dispose() {
  _latitudeController.dispose();
  _longitudeController.dispose();
  super.dispose();
}

备选方案：强制重建组件（不推荐） #

如果不想使用控制器，可以通过给 TextFormField 设置唯一 key，强制组件在值变化时重建：

fields.add(TextFormField(
  key: ValueKey('latitude-${locInMemory.getLatitude()}'),
  initialValue: '${locInMemory.getLatitude()}',
  decoration: ui.asDecoration(ui.loc.attr_geo_Latitude),
  keyboardType: const TextInputType.numberWithOptions(decimal: true),
));
fields.add(TextFormField(
  key: ValueKey('longitude-${locInMemory.getLongitude()}'),
  initialValue: '${locInMemory.getLongitude()}',
  decoration: ui.asDecoration(ui.loc.attr_geo_Longitude),
  keyboardType: const TextInputType.numberWithOptions(decimal: true),
));

此方法会销毁并重建输入框，可能导致输入状态丢失，仅作为临时应急方案。

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