在 Flutter中,Form
和TextFormField
是输入文本时非常有用的Widget。
我们如何在键盘上按“下一步”时,正确的移动输入焦点的呢?
使用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 */},
),
],
),
),
);
}
}
通过添加 一个FocusScopeNode
和 FocusScope
关联,通过使用_node.nextFocus
就可以轻松地将焦点移动到下一个TextFormField
。
如果想移动到上一个焦点,使用_node.previousFocus()
就可以轻松办到。
❝注意:这些方法也使用TextField,即使没有Form也同样可以. ❞
细节很重要,这些小tips可以节省时间并且也会让我们的用户满意。