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

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

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

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

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

import 'package:flutter/material.dart'; class EmailPasswordSignInForm extends StatefulWidget { @override _EmailPasswordSignInFormState createState() => _EmailPasswordSignInFormState(); } class _EmailPasswordSignInFormState extends State { final FocusScopeNode _node = FocusScopeNode(); final GlobalKey _formKey = GlobalKey(); @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: [ // 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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。