Flutter中TextFormField结合MobX Observer不更新问题求助

核心原因 #

TextFormField的initialValue仅在组件首次构建时赋值，后续哪怕Observable变量更新、Observer触发组件重建，initialValue也不会重新读取并更新输入框内容——这是组件本身的设计逻辑，和Mobx的Observer无关。

解决方案一：用TextEditingController绑定Observable变量 #

通过TextEditingController同步Observable变量的变化，替代initialValue：

修改_RegisterFormState代码如下：

class _RegisterFormState extends State<RegisterForm> {
  final _formkey = GlobalKey<FormState>();
  final locationEC = LocationController();
  
  // 为每个输入框创建控制器
  final cepController = TextEditingController();
  final ufController = TextEditingController();
  final cityController = TextEditingController();

  @override
  void dispose() {
    // 页面销毁时释放控制器资源
    cepController.dispose();
    ufController.dispose();
    cityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        margin: const EdgeInsets.all(5),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Form(
            key: _formkey,
            child: Column(
              children: [                
                SizedBox(
                  height: 50,
                  width: double.infinity,
                  child: ElevatedButton.icon(
                    onPressed: () {
                      locationEC.getPosition();
                    },
                    icon: const Icon(Icons.location_on),
                    label: Text('Selecionar Localização',
                        style: TextStyles.instance.textRegular
                            .copyWith(fontSize: 16)),
                    style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: ColorsApp.instance.primary,
                        elevation: 2,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15),
                          side: BorderSide(
                              color: ColorsApp.instance.primary, width: 1),
                        )),
                  ),
                ),
                const SizedBox(height: 12),
                Observer(
                  builder: (_) {
                    // 同步Observable变量到控制器
                    if (cepController.text != locationEC.cep) {
                      cepController.text = locationEC.cep;
                    }
                    return TextFormField(
                      enabled: false,
                      controller: cepController, // 使用控制器替代initialValue
                      style: TextStyles.instance.textInput,
                      decoration: InputDecoration(
                        labelText: 'CEP',
                        fillColor: ColorsApp.instance.background,
                      ),
                    );
                  },
                ),
                const SizedBox(height: 12),
                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      child: Observer(
                        builder: (_) {
                          if (ufController.text != locationEC.uf) {
                            ufController.text = locationEC.uf;
                          }
                          return TextFormField(
                            enabled: false,
                            controller: ufController,
                            style: TextStyles.instance.textInput,
                            decoration: InputDecoration(
                              labelText: 'UF',
                              fillColor: ColorsApp.instance.background,
                            ),
                          );
                        },
                      ),
                    ),
                    const SizedBox(width: 5),
                    Flexible(
                      flex: 4,
                      child: Observer(
                        builder: (_) {
                          if (cityController.text != locationEC.city) {
                            cityController.text = locationEC.city;
                          }
                          return TextFormField(
                            enabled: false,
                            controller: cityController,
                            style: TextStyles.instance.textInput,
                            decoration: InputDecoration(
                              labelText: 'Cidade',
                              fillColor: ColorsApp.instance.background,
                            ),
                          );
                        },
                      ),
                    ),
                  ],
                ),                
              ],
            ),
          ),
        ),
      );
  }
}

解决方案二：检查Mobx代码生成与构造函数 #

1. 确保Mobx代码已正确生成
   运行命令生成代理文件：

   flutter pub run build_runner build
   

   确认location_controller.g.dart文件存在且内容完整，这是Mobx响应式生效的基础。

2. 修复控制器构造函数
   原代码中的locationController()是普通方法，不是构造函数，导致初始化时不会自动执行getPosition()。修改为正确的构造函数：

   abstract class _LocationController with Store{
     double lat = 0.0;
     double long = 0.0;
     String erro = '';
     
     @observable
     String cep = '';
   
     @observable
     String city = '';
   
     @observable
     String uf = '';
     
     // 正确的构造函数
     _LocationController() {
       getPosition();
     }
   
     @action
     Future<void> getPosition() async { // 显式声明返回类型
       try {
         Position position = await _currentPosition();
         lat = position.latitude;
         long = position.longitude;
   
         Map<String, String> addressData =
             await LocationUtil.getAddressFromCoordinates(lat, long);
         cep = addressData['cep'] ?? ''; // 增加空值判断避免Null
         uf = addressData['uf'] ?? '';
         city = addressData['city'] ?? '';
       
       } catch (e) {
         erro = e.toString();
       }
     }
   }
   

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