我希望用户能够在我的 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",
),
),
],
),
);
}
}
最佳答案
结果是浏览器将焦点转移到了其他地方。
我在“build”方法中添加了默认浏览器行为的预防:
import 'dart:html';
...
@override
Widget build(BuildContext context) {
document.addEventListener('keydown', (dynamic event) {
if (event.code == 'Tab') {
event.preventDefault();
}
});
...
关于user-interface - 如何在flutter for web中使用 'tab'在控件之间跳转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57117707/