Flutter中点击Next按钮如何将焦点切换至下一个输入框？

问题根源 #

focusNode.nextFocus()方法默认是在全局焦点遍历链中查找下一个可聚焦节点，而非你通过FocusTraversalGroup自定义的组内遍历顺序。这就是为什么点击Next按钮后焦点跳回第一个输入框——全局遍历链的起始节点指向第一个输入框，组内的自定义顺序并未被该方法识别。

解决方法 #

利用FocusTraversalGroup自身的遍历状态，在点击按钮时触发组内的顺序切换，步骤如下：

1. 给FocusTraversalGroup绑定一个GlobalKey，用于获取它的状态
2. 在Next按钮的点击事件中，通过这个key调用traversalNext()方法，严格遵循组内的焦点顺序切换

修改后的代码示例 #

// 定义全局key
final _traversalGroupKey = GlobalKey<FocusTraversalGroupState>();

@override
Widget build(BuildContext context) {
  return FocusTraversalGroup(
    key: _traversalGroupKey,
    child: Column(
      children: [
        // 输入框1
        TextField(
          decoration: InputDecoration(
            suffixIcon: IconButton(
              icon: const Icon(Icons.arrow_forward),
              onPressed: () {
                // 触发组内下一个焦点
                _traversalGroupKey.currentState?.traversalNext();
              },
            ),
          ),
        ),
        // 输入框2
        TextField(
          decoration: InputDecoration(
            suffixIcon: IconButton(
              icon: const Icon(Icons.arrow_forward),
              onPressed: () {
                _traversalGroupKey.currentState?.traversalNext();
              },
            ),
          ),
        ),
        // 后续输入框同理
      ],
    ),
  );
}

额外说明 #

• 如果需要自定义组内的焦点顺序（而非默认的布局顺序），可以给FocusTraversalGroup设置policy属性，比如OrderedTraversalPolicy手动指定焦点节点顺序：

  FocusTraversalGroup(
    policy: OrderedTraversalPolicy(
      nodes: [_focusNode3, _focusNode1, _focusNode2], // 自定义遍历顺序
    ),
    // ...
  )
  

• 确保所有需要参与组内遍历的输入框，都被包含在FocusTraversalGroup的子Widget树中，避免节点不在组内导致遍历失效。

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