Flutter Windows应用Tab键切换输入框焦点顺序异常如何解决

该问题的核心原因是Flutter默认的全局焦点遍历逻辑会识别页面内所有可聚焦组件，包括NavigationRail侧边栏中的导航选项，不会自动区分表单域和其他功能区域的焦点边界，可通过以下方案修复：

方案1：焦点组隔离（推荐，无侵入） #

使用FocusTraversalGroup包裹整个表单区域，将表单标记为独立的焦点遍历域，Tab/Shift+Tab触发遍历时会默认在组内按组件代码顺序切换，不会跳出域选中侧边栏组件。
示例代码：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 原有侧边栏代码无需修改
    NavigationRail(
      selectedIndex: 0,
      destinations: const [
        NavigationRailDestination(icon: Icon(Icons.folder), label: Text("Contracts")),
        NavigationRailDestination(icon: Icon(Icons.receipt_long), label: Text("Invoices")),
        NavigationRailDestination(icon: Icon(Icons.credit_card), label: Text("Payments")),
      ],
    ),
    Expanded(
      // 给表单容器套焦点遍历组
      child: FocusTraversalGroup(
        // 按组件在代码中的书写顺序确定遍历优先级
        policy: WidgetOrderTraversalPolicy(),
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: [
              TextFormField(
                decoration: const InputDecoration(labelText: "Contract Number"),
              ),
              const SizedBox(height: 16),
              TextFormField(
                decoration: const InputDecoration(labelText: "Composition"),
              ),
              // 其余表单输入框按预期跳转顺序依次排列即可
            ],
          ),
        ),
      ),
    )
  ],
)

补充：如果业务上不需要侧边栏NavigationRail支持键盘操作聚焦，可以直接给侧边栏外层包裹FocusTraversalGroup并传入policy: NoneTraversalPolicy()，直接禁用该区域的焦点遍历能力，Tab触发跳转时会直接跳过所有侧边栏选项。

方案2：手动指定遍历顺序（适用于布局顺序和预期跳转顺序不一致的场景） #

如果表单组件的代码书写顺序和实际需要的焦点跳转顺序不匹配，可以搭配OrderedTraversalPolicy手动给每个输入框指定遍历优先级：

// 表单区域配置
FocusTraversalGroup(
  policy: OrderedTraversalPolicy(),
  child: SingleChildScrollView(
    padding: const EdgeInsets.all(24),
    child: Column(
      children: [
        // 用FocusTraversalOrder包裹每个输入框，指定顺序值
        FocusTraversalOrder(
          order: const NumericFocusOrder(1), // 数字越小越先被聚焦
          child: TextFormField(decoration: const InputDecoration(labelText: "Contract Number")),
        ),
        const SizedBox(height: 16),
        FocusTraversalOrder(
          order: const NumericFocusOrder(2),
          child: TextFormField(decoration: const InputDecoration(labelText: "Composition")),
        ),
        // 其余输入框按3、4、5...的顺序依次指定即可
      ],
    ),
  ),
)

这种方式可以完全自定义焦点跳转逻辑，不会受组件实际布局位置影响。

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