Flutter TextFormField聚焦后无法输入文本问题求助

云原生阿岚

2026-8-2

TextFormField清空后无法输入的解决方案

点击TextFormField的清除按钮清空内容后，光标虽显示聚焦但无法输入，需再次点击输入框才能恢复输入，问题出在以下两点：

使用普通的suffix Widget作为清除图标容器，点击时会抢占输入框焦点，导致输入框失去可输入状态（视觉光标残留但实际已失焦）
多余的setState()调用可能干扰输入框的焦点维护

修改后的代码：

Widget _textInputNumber({controller, name, enable, autofocus, required}) {
  return TextFormField(
    autofocus: autofocus,
    keyboardType: TextInputType.number,
    enabled: enable,
    controller: controller,
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.white,
      // 替换suffix为suffixIcon，避免焦点被抢占
      suffixIcon: InkWell(
        onTap: () {
          controller.clear(); // 用clear()更规范，同步处理内部状态
          // 无需setState，controller变化会自动触发输入框更新
        },
        child: const Icon(Icons.clear),
      ),
    ),
    validator: required
        ? (value) => value!.isEmpty ? '必填项！' : null
        : null,
    onSaved: (value) => name = value,
  );
}

关键修改说明：

替换suffix为suffixIcon：suffixIcon是Flutter为输入框后缀图标提供的专用属性，点击它不会干扰输入框的焦点状态，确保输入框始终保持可输入的聚焦状态。
使用controller.clear()：相比直接赋值controller.text = ''，clear()方法会同步重置输入框的选择范围、光标位置等内部状态，避免潜在的状态不一致问题。
移除setState()：TextEditingController本身是可监听对象，输入框会自动响应其文本变化，调用setState()会触发不必要的组件重绘，反而可能破坏焦点状态。