Flutter web，禁用 Tab 按按钮上的焦点

Question

我有一个文本字段，然后是一个按钮，然后是一个文本字段。按 T​​ab 键，焦点将转到第一个文本字段，再次按 Tab 键，焦点将转到按钮。当按 Tab 键两次时，如何忽略按钮上的焦点并将焦点放在第二个文本字段上？

Answer 1

更好的解决方案是包装小部件，您不想在Focus小部件中聚焦并将属性descendantsAreFocusable和设置canRequestFocus为false。像这样：

Focus(
  descendantsAreFocusable: false,
  canRequestFocus: false,
  child: ElevatedButton(onPressed: () {}, child: Text('CLICK ME')),
),

这样，当按 Tab 时，小部件将自动跳过

Answer 2

这是一个结合了onEditingComplete和 的解决方案RawKeyboardListener。

onEditingComplete用于捕捉ENTER钥匙，而RawKeyboardListener用于TAB钥匙

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final firstFieldFocusNode = useFocusNode();
    final secondFieldFocusNode = useFocusNode();
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(16.0),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RawKeyboardListener(
              focusNode: firstFieldFocusNode,
              onKey: (event) {
                if (event.logicalKey == LogicalKeyboardKey.tab) {
                  secondFieldFocusNode.requestFocus();
                }
              },
              child: TextFormField(
                decoration: InputDecoration(labelText: 'First field'),
                onEditingComplete: () {
                  print('ICI');
                  secondFieldFocusNode.requestFocus();
                },
              ),
            ),
            const SizedBox(height: 48.0),
            ElevatedButton(onPressed: () {}, child: Text('CLICK ME')),
            const SizedBox(height: 24.0),
            TextFormField(
              focusNode: secondFieldFocusNode,
              decoration: InputDecoration(labelText: 'Second field'),
            ),
          ],
        ),
      ),
    );
  }
}