Flutter web，在 Tab 按下時禁用按鈕焦點

Question

我有一個 Textfield，然后是一個 Button，然后是一個 Textfield。 在 Tab 鍵上按下焦點轉到第一個文本字段，在 Tab 鍵上再次按下焦點轉到按鈕。 當 Tab 鍵被按下 2 次時，如何忽略按鈕上的焦點並將焦點放在第二個文本字段上？

Answer 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'),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 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();

謝謝蒂埃里的幫助

Answer 3

更好的解決方案是包裝小部件，您不想在Focus小部件中獲得焦點，並將屬性descendantsAreFocusable和canRequestFocus設置為false 。 像這樣：

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

這樣，當按下 Tab 時，小部件將自動被跳過