Как переключаться между элементами управления с помощью «вкладки» во флаттере для Интернета?

Я хочу, чтобы пользователь мог переключаться между элементами управления с помощью «Tab» в моем веб-приложении флаттера. Я следил за этой публикацией, чтобы поймать клавишу "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",
            ),
          ),
        ],
      ),
    );
  }
}

flutter flutter-web user-interface
person polina-c    schedule 19.07.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Оказалось, что браузер переводил фокус в другое место. Я добавил предотвращение поведения браузера по умолчанию в метод 'build':

import 'dart:html';
...

@override
Widget build(BuildContext context) {  

  document.addEventListener('keydown', (dynamic event) {
    if (event.code == 'Tab') {
      event.preventDefault();
    }
  });
  ...
person polina-c    schedule 19.07.2019

arrow_upward
2
arrow_downward

Решение, которое сработало для меня, немного отличается. Я использую 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()});
    }
  ...
}
...
person Musa Biralo    schedule 12.03.2021