Flutter 如何让TextFormField达到maxLength时自动切换到下一个输入框

现有实现的核心问题：onEditingComplete的触发时机是用户按下键盘的完成/回车键，本身不会监听输入内容的长度变化，自然做不到满长度自动跳焦点的效果。

核心调整思路 #

• 不要仅依赖onEditingComplete做焦点切换，改用TextFormField自带的onChanged回调实时追踪输入内容的长度
• 当检测到当前输入内容长度达到预设的maxLength阈值时，直接触发焦点跳转，不需要等待用户手动操作
• 保留原有的onEditingComplete逻辑，兼容用户主动按回车提交的使用场景，不破坏原有交互习惯
• 搭配decoration里的counterText: ""隐藏系统默认在输入框下方显示的长度计数器，避免冗余UI干扰

参考改造代码 #

// 提前在State类中声明每个输入框对应的FocusNode，用于精准控制焦点跳转
// late FocusNode hhFocusNode;
// late FocusNode mmFocusNode;

Widget _buildHH() {
  return Theme(
    data: Theme.of(context).copyWith(primaryColor: Colors.orange),
    child: Expanded(
      child: TextFormField(
        maxLength: 2,
        cursorColor: Colors.orange,
        style: const TextStyle(color: Colors.orange),
        decoration: const InputDecoration(
          // 隐藏默认的长度计数提示
          counterText: "",
          border: OutlineInputBorder(),
          labelText: 'HH'
        ),
        keyboardType: TextInputType.number,
        // 保留回车触发的焦点切换逻辑
        onEditingComplete: () => FocusScope.of(context).nextFocus(),
        // 新增输入监听，实现满长度自动跳转
        onChanged: (inputValue) {
          if (inputValue.length == 2) {
            // 直接把焦点切到下一个输入框，不需要等用户按回车
            FocusScope.of(context).requestFocus(mmFocusNode);
          }
        },
        validator: (String value) {
          return null;
        },
        onSaved: (String value) {
          _HH = value;
        },
      ),
    ),
  );
}

实操注意点 #

• 给每个输入框绑定独立的FocusNode做跳转控制，不要完全依赖nextFocus()的自动顺序匹配，避免出现用户中途删字、补字时焦点跳转错位的问题
• 后续的分钟、秒数输入框可以复用完全相同的逻辑，只需要修改对应的maxLength阈值和要跳转的下一个FocusNode即可

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