Flutter中首次点击TextField无法输入文本的问题排查与修复

为什么点击两次才能输入？ #

核心问题是**TextEditingController的创建时机错误**：

• 每次进入编辑模式（_isEditingMode变为true），subTitleWidget的getter都会重新实例化_subTitleEditingController。
• 点击编辑按钮触发setState后，Widget树重建，此时新创建的控制器还未完全和TextField绑定完成，首次点击TextField时焦点与控制器的关联出现异常，导致无法输入；第二次点击时控制器已稳定绑定，才能正常输入。
• 另外，非编辑模式下的Text组件存在语法错误（model.quantity.toString();多了分号）。

错误代码点 #

1. 在subTitleWidget的getter中动态创建_subTitleEditingController，而非在生命周期方法（如initState）或编辑模式切换时初始化。
2. 未重写dispose方法释放控制器，存在内存泄漏风险。
3. 非编辑模式下的Text组件有多余分号，属于语法错误。

修复后的完整代码 #

class EditListTile extends StatefulWidget {
  final ItemsLocatedLot model;
  final Function(ItemsLocatedLot listModel) onChanged;
  const EditListTile({super.key, required this.model, required this.onChanged});

  @override
  State<EditListTile> createState() => _EditListTileState();
}

class _EditListTileState extends State<EditListTile> {
  late ItemsLocatedLot model;
  late bool _isEditingMode;
  late TextEditingController _subTitleEditingController;

  @override
  void initState() {
    super.initState();
    model = widget.model;
    _isEditingMode = false;
    // 在初始化阶段创建控制器，后续仅更新文本而非重新实例化
    _subTitleEditingController = TextEditingController(text: model.quantity);
  }

  @override
  void dispose() {
    // 释放控制器，避免内存泄漏
    _subTitleEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: titleWidget,
      subtitle: subTitleWidget,
      trailing: tralingButton,
    );
  }

  Widget get titleWidget {
    return Text(model.lot);
  }

  Widget get subTitleWidget {
    if (_isEditingMode) {
      // 进入编辑模式时更新控制器文本，而非重新创建控制器
      _subTitleEditingController.text = model.quantity;
      return TextField(
        controller: _subTitleEditingController,
        keyboardType: TextInputType.number,
        decoration: InputDecoration(
          suffix: InkWell(
            onTap: () {
              _subTitleEditingController.text = '';
            },
            child: const Icon(Icons.clear),
          ),
        ),
      );
    } else {
      // 修复语法错误：移除多余分号
      return Text(model.quantity.toString());
    }
  }

  Widget get tralingButton {
    if (_isEditingMode) {
      return IconButton(
        icon: const Icon(Icons.check),
        onPressed: saveChange,
      );
    } else {
      return IconButton(
        icon: const Icon(Icons.edit),
        onPressed: _toggleMode,
      );
    }
  }

  void _toggleMode() {
    setState(() {
      _isEditingMode = !_isEditingMode;
    });
  }

  void saveChange() {
    model.quantity = _subTitleEditingController.text;
    _toggleMode();
    widget.onChanged(model);
  }
}

额外优化建议 #

可以在切换到编辑模式时主动请求TextField焦点，提升用户体验：

void _toggleMode() {
  setState(() {
    _isEditingMode = !_isEditingMode;
  });
  // 进入编辑模式后自动聚焦TextField
  if (_isEditingMode) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FocusScope.of(context).requestFocus(FocusNode());
    });
  }
}

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