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

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

我们可以提供一种在键盘上按“下一步”时移动输入焦点的便捷方法吗？

使用FocusScopeNode，这是非常容易做到的。

假设您有一个电子邮件和密码输入表单，如下所示：

import 'package:flutter/material.dart';

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 Scaffold(
      appBar: AppBar(
        title: Text("FocusScopeNode "),
      ),
      body: Container(
        child: Form(
          key: _formKey,
          child: FocusScope(
            node: _node,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                // email
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    hintText: 'https://luckly.work/',
                  ),
                  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 */},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
  
66
  
67
 

文章来源: jianguo.blog.csdn.net，作者：坚果前端の博客，版权归原作者所有，如需转载，请联系作者。

原文链接：jianguo.blog.csdn.net/article/details/119538047