为何需两次nextFocus请求才能切换TextField焦点？

第一次调用nextFocus后的焦点去向 #

你遇到的问题源于双层Focus节点结构：你用Focus组件包裹TextField，但TextField内部会自动创建自身的FocusNode——外层Focus的节点是父节点，TextField自带的节点是子节点。

当焦点在TextField的子节点上时，第一次调用nextFocus会先尝试寻找该子节点的同级节点（不存在），于是焦点会回退到父节点（外层Focus的节点）。这个父节点没有可视化的输入区域，所以看起来焦点“消失”了，实际是停在了外层Focus的节点上。

第二次调用nextFocus时，父节点会找到自己的同级节点（下一个Focus组件的父节点），并自动进入该父节点的子节点（对应的TextField），这时你才会看到下一个输入框获得焦点。

直接切换到下一个TextField的方案 #

方案1：去掉外层Focus，手动管理自定义FocusNode #

直接给每个TextField分配自定义的FocusNode，跳过外层Focus组件，手动指定焦点切换目标：

// 提前创建所有FocusNode
final focusNodes = List.generate(9, (_) => FocusNode());

// 构建布局
Column(
  children: [
    TextField(
      focusNode: focusNodes[0],
      onKeyEvent: (event, node) {
        if (event.logicalKey == LogicalKeyboardKey.enter) {
          focusNodes[1].requestFocus();
          return KeyEventResult.handled;
        }
        return KeyEventResult.ignored;
      },
    ),
    TextField(focusNode: focusNodes[1], /* 同理设置切换逻辑 */),
    // 剩余TextField依次对应focusNodes[2]到focusNodes[8]
  ],
);

方案2：用FocusTraversalGroup规范遍历顺序 #

如果必须保留外层Focus，可以用FocusTraversalGroup包裹组件，强制焦点按线性顺序遍历，不受嵌套Column影响：

FocusTraversalGroup(
  policy: OrderedTraversalPolicy(),
  child: Column(
    children: [
      Focus(child: TextField()),
      Focus(child: TextField()),
      Focus(child: TextField()),
      // 嵌套的Column也包裹在FocusTraversalGroup内
      FocusTraversalGroup(
        child: Column(
          children: [
            Focus(child: TextField()),
            Focus(child: TextField()),
            Focus(child: TextField()),
          ],
        ),
      ),
      Focus(child: TextField()),
      FocusTraversalGroup(
        child: Column(
          children: [
            Focus(child: TextField()),
            Focus(child: TextField()),
            Focus(child: TextField()),
          ],
        ),
      ),
    ],
  ),
);

之后调用FocusScope.of(context).nextFocus()就能直接切换到下一个TextField。

方案3：给Focus指定traversalOrder #

给每个外层Focus组件设置明确的遍历顺序，让焦点按指定顺序切换：

Column(
  children: [
    Focus(
      traversalOrder: 1,
      child: TextField(
        onKeyEvent: (event, node) {
          if (event.logicalKey == LogicalKeyboardKey.enter) {
            FocusScope.of(context).nextFocus();
            return KeyEventResult.handled;
          }
          return KeyEventResult.ignored;
        },
      ),
    ),
    Focus(traversalOrder: 2, child: TextField()),
    Focus(traversalOrder: 3, child: TextField()),
    // 嵌套Column内的Focus依次设置traversalOrder 4-6
    Column(
      children: [
        Focus(traversalOrder: 4, child: TextField()),
        Focus(traversalOrder: 5, child: TextField()),
        Focus(traversalOrder: 6, child: TextField()),
      ],
    ),
    Focus(traversalOrder: 7, child: TextField()),
    // 最后一组设置8-10
    Column(
      children: [
        Focus(traversalOrder: 8, child: TextField()),
        Focus(traversalOrder: 9, child: TextField()),
        Focus(traversalOrder: 10, child: TextField()),
      ],
    ),
  ],
);

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