用FocusScopeNode轻松地在TextFormFields之间移动焦点

Form 和 是在Flutter中输入文本时非常有用的小工具。TextFormField

我们能否提供一种方便的方式，在键盘上按下 "下一步 "时移动输入焦点？

有了FocusScopeNode ，这就超级容易做到了。

假设你有一个电子邮件和密码输入表单，它看起来像这样。

class EmailPasswordSignInForm extends StatefulWidget {
  @override
  _EmailPasswordSignInFormState createState() =>
      _EmailPasswordSignInFormState();
}

class _EmailPasswordSignInFormState extends State<EmailPasswordSignInForm> {
  final FocusScopeNode _node = FocusScopeNode();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    _node.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: FocusScope(
        node: _node,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            // email
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'john@doe.com',
              ),
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.emailAddress,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // password
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              textInputAction: TextInputAction.done,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // submit
            RaisedButton(
              child: Text('Sign In'),
              onPressed: () {/* submit code here */},
            ),
          ],
        ),
      ),
    );
  }
}

通过添加一个FocusScope 和相关的FocusScopeNode ，你可以通过传递_node.nextFocus 到onEditingComplete ，轻松地将焦点移到下一个TextFormField 。

同样容易的是，如果你需要返回，你可以调用_node.previousFocus() 。

注意：这也适用于TextField ，所以即使没有Form ，你也可以使用它。

细节很重要，这些小的节省时间的方法可以使我们的用户高兴。

编码愉快!