Question

我有一个非常标准的登录表单。在Web上，具有选项卡导航是很标准的---按电子邮件文本字段上的tab键以导航到密码文本字段（反之亦然）。在移动设备上，TextInputAction.next应该以相同的方式工作。但是我该怎么办呢？

这是我简单的登录表格：

class LoginFormState extends State<LoginForm> {
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Scaffold(
        body: Form(
      key: _formKey,
      child: Padding(
          padding: EdgeInsets.all(10.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Enter your email'),
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                autovalidate: true,
                style: TextStyle(
                  fontSize: 28,
                ),
              ),
              TextFormField(
                obscureText: true,
                autocorrect: false,
                decoration: InputDecoration(labelText: 'Enter your API key'),
                style: TextStyle(
                  fontSize: 28,
                ),
              ),

            ],
          )),
    ));

Answer 1

您需要为每个TextFormField创建一个FocusNode，然后将其分配给每个TextFormField，然后在参数onEditingComplete中调用{下一个requestFocus的{{1}}中的{1}}。

请查看此官方tutorial以获取更多信息。

并结帐flutter_form_bloc并使用简化的API来执行此操作。

FocusNode

Answer 2

这对我有用，可以让标签正确地将我带到下一个字段：

onChanged: (text) {
  if (text.contains('\t')) {
    text = text.replaceAll('\t', '');
    _nextFocusNode.requestFocus();
  }
},

选项卡keypress / TextInputAction.next导航到下一个输入表单

2 个答案: