Flutter中带suffixIcon时TextInputAction.next无法跳转至下一个输入框

核心原因 #

默认情况下，suffixIcon 会被包装成可交互组件，点击键盘的next按钮时，焦点会误落到这个图标组件上，而非预设的下一个输入框。

解决方案 #

1. 让suffixIcon跳过焦点遍历 #

直接给suffixIcon的外层交互组件（比如IconButton）设置focusNode，让焦点遍历跳过这个图标：

TextFormField(
  textInputAction: TextInputAction.next,
  suffixIcon: IconButton(
    focusNode: FocusNode(skipTraversal: true), // 关键配置
    icon: const Icon(Icons.clear),
    onPressed: () {
      // 你的图标点击逻辑
    },
  ),
)

2. 手动接管焦点跳转（更稳妥） #

如果上面的方法不生效，可以通过FocusScope手动控制焦点走向，完全指定next按钮的跳转目标：
首先定义两个焦点节点：

final FocusNode _firstInputFocus = FocusNode();
final FocusNode _secondInputFocus = FocusNode();

然后在输入框中配置：

// 第一个输入框
TextFormField(
  focusNode: _firstInputFocus,
  textInputAction: TextInputAction.next,
  onFieldSubmitted: (_) {
    // 提交时直接把焦点给第二个输入框
    FocusScope.of(context).requestFocus(_secondInputFocus);
  },
  suffixIcon: IconButton(
    icon: const Icon(Icons.clear),
    onPressed: () {
      // 图标点击逻辑
    },
  ),
),

// 第二个输入框
TextFormField(
  focusNode: _secondInputFocus,
  textInputAction: TextInputAction.done,
),

3. 静态图标直接用Icon组件 #

如果你的suffixIcon不需要点击交互，直接用Icon而非IconButton，静态图标不会成为焦点候选，自然不会抢焦点：

TextFormField(
  textInputAction: TextInputAction.next,
  suffixIcon: const Icon(Icons.info_outline),
)

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