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

Posted 2023-02-23

【中文标题】Flutter web，禁用Tab按下按钮上的焦点

【英文标题】：Flutter web, disable focus on button on Tab press

【发布时间】：2021-05-20 19:10:32

【问题描述】：

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

【参考方案1】：

这是一个结合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'),
            ),
          ],
        ),
      ),
    );
  

【参考方案2】：

onKey 内的secondFieldFocusNode.requestFocus() 不起作用，但这段代码可以：

class HomePage extends HookWidget 
  @override
  Widget build(BuildContext context) 
    final firstFieldFocusNode = FocusNode();
    final secondFieldFocusNode = FocusNode();
    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) 
                  firstFieldFocusNode.nextFocus(); <============= HERE
                
              ,
              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'),
            ),
          ],
        ),
      ),
    );
  

我刚刚将secondFieldFocusNode.requestFocus(); 替换为firstFieldFocusNode.nextFocus();

感谢蒂埃里的帮助