Flutter自动换算TextFormField点击1次无法立刻输入的问题是什么？

问题原因 #

• 核心原因是你将Units组件定义为无状态组件（StatelessWidget），但内部持有了TextEditingController这类可变状态对象。无状态组件在页面触发任何重绘行为时都会重新生成实例，你定义的控制器会被重置，同时输入框的焦点会被打断，因此第一次点击输入框触发重绘后焦点丢失，需要第二次点击才能重新获取焦点正常输入。
• 次要原因有2个：
  1. 初始默认值为0，未配置点击全选逻辑，首次点击输入框时光标默认落在0的前方/后方，输入内容不会直接替换默认值，容易误以为输入无响应。
  2. onChanged回调触发转换逻辑时，未做输入合法性校验，当用户输入未完成的内容（比如单独的小数点）时，double.tryParse会返回0，如果逻辑中误修改了当前输入框的文本，会直接覆盖用户的输入内容，看起来像输入无效。

修复方案 #

1. 将组件改为有状态组件：把所有TextEditingController移到State类中管理，并在dispose生命周期中销毁控制器，避免重复创建和内存泄漏。
   参考代码：

class Units extends StatefulWidget {
  Units({Key? key}) : super(key: key);

  @override
  State<Units> createState() => _UnitsState();
}

class _UnitsState extends State<Units> {
  final TextEditingController _feetController = TextEditingController(text: '0');
  final TextEditingController _centimeterController = TextEditingController(text: '0');
  final TextEditingController _meterController = TextEditingController(text: '0');
  // 可选：添加FocusNode判断当前激活的输入框，避免转换逻辑干扰正在输入的内容
  late final FocusNode _feetFocus = FocusNode();
  late final FocusNode _cmFocus = FocusNode();
  late final FocusNode _mFocus = FocusNode();

  void _convertUnit(UnitType type) {
    double? ft = double.tryParse(_feetController.value.text);
    double? cm = double.tryParse(_centimeterController.value.text);
    double? m = double.tryParse(_meterController.value.text);
    // 输入未完成时不执行转换，避免覆盖用户输入
    if ((type == UnitType.feet && ft == null) || 
        (type == UnitType.centimeter && cm == null) || 
        (type == UnitType.meter && m == null)) {
      return;
    }
    ft = ft ?? 0;
    cm = cm ?? 0;
    m = m ?? 0;

    switch (type) {
      case UnitType.feet:
        _meterController.text = (ft / 3.281).toStringAsFixed(2);
        _centimeterController.text = (ft * 30.48).toStringAsFixed(2);
        break;
      case UnitType.meter:
        _centimeterController.text = (m * 100).toStringAsFixed(2);
        _feetController.text = (m * 3.281).toStringAsFixed(2);
        break;
      case UnitType.centimeter:
        _meterController.text = (cm / 100).toStringAsFixed(2);
        _feetController.text = (cm / 30.48).toStringAsFixed(2);
        break;
    }
  }

  @override
  void dispose() {
    _feetController.dispose();
    _centimeterController.dispose();
    _meterController.dispose();
    _feetFocus.dispose();
    _cmFocus.dispose();
    _mFocus.dispose();
    super.dispose();
  }

2. 优化输入框配置：添加点击全选逻辑，绑定对应的FocusNode：

TextFormField(
  textAlign: TextAlign.center,
  style: GoogleFonts.tauri(
    fontWeight: FontWeight.bold,
    fontSize: MediaQuery.of(context).size.height / 30,
    color: Colors.white,
  ),
  controller: _feetController,
  focusNode: _feetFocus,
  keyboardType: TextInputType.number,
  onChanged: (_) => _convertUnit(UnitType.feet),
  onTap: () {
    // 点击时全选当前内容，直接替换默认值0
    _feetController.selection = TextSelection(
      baseOffset: 0,
      extentOffset: _feetController.value.text.length,
    );
  },
  decoration: const InputDecoration(
    border: InputBorder.none,
  ),
  inputFormatters: [
    LengthLimitingTextInputFormatter(5),
  ],
)

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