如何在 flutter for web 中使用 'tab' 在控件之间跳转？

Question

我希望用户能够在我的 flutter web 应用程序中使用 'Tab' 在控件之间跳转。我跟着 this post 抓住了关键 "Tab" 并导航到下一个控件。

当用户按下 'Tab' 时，光标跳转到下一个文本框，但是当用户键入时，文本框中没有出现任何字母。

有什么问题吗？

代码如下：

class _LoginScreenState extends State<LoginScreen> {
  FocusNode _passwordFocus;
  FocusNode _emailFocus;

  @override
  void initState() {
    super.initState();

    _emailFocus = FocusNode();
    _passwordFocus = FocusNode();
  }

  @override
  void dispose() {
    _emailFocus.dispose();
    _passwordFocus.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {        

    final TextEditingController emailController =
        new TextEditingController(text: this._email);
    final TextEditingController passwordController =
        new TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: Column(
        children: <Widget>[
          RawKeyboardListener(
            child: TextField(
              autofocus: true,
              controller: emailController,
              decoration: InputDecoration(
                labelText: "EMail",
              ),
            ),
            onKey: (dynamic key) {
              if (key.data.keyCode == 9) {
                FocusScope.of(context).requestFocus(_passwordFocus);
              }
            },
            focusNode: _emailFocus,
          ),
          TextField(
            controller: passwordController,
            obscureText: true,
            focusNode: _passwordFocus,
            decoration: InputDecoration(
              labelText: "Password",
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

原来是浏览器将焦点转移到了其他地方。我在方法 'build':

中添加了对默认浏览器行为的预防

import 'dart:html';
...

@override
Widget build(BuildContext context) {  

  document.addEventListener('keydown', (dynamic event) {
    if (event.code == 'Tab') {
      event.preventDefault();
    }
  });
  ...

Answer 2

适用于我的解决方案略有不同。我在 Flutter 2.0.1 和 Dart 2.12.0

import 'dart:html';
import 'package:flutter/foundation.dart';
...

@override
Widget build(BuildContext context) {  

  if (kIsWeb) {
      document.addEventListener('keydown',
          (event) => {if (event.type == 'tab') event.preventDefault()});
    }
  ...
}
...

如何在 flutter for web 中使用 'tab' 在控件之间跳转？

How to jump between controls with 'tab' in flutter for web?

user-interface

flutter

flutter-web