本文介绍了在TextFormField Flutter中使用FocusNode的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个 TextFormField
应该可以接收数字。输入第一个数字时,应跳至第二个 TextFormField
,然后跳至第三个TextFormField。每个 TextFormField
都具有 FocusNode
属性,我只是不知道如何使用它。我有这个
I have a TextFormField
that is supposed to receive digits. On entry of first digit it should jump to second TextFormField
then to the third TextFormField. Each TextFormField
has the FocusNode
property I just do not know how to use it. I have this
TextFormField( //First Field
autofocus: true,
focusNode: FocusNode(),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4.0)
),
),
style: TextStyle(
color: Colors.orange,
fontSize: 15.0,
),
keyboardType:
TextInputType.number,
maxLength: 1,
),
// second Field
TextFormField(),
//third Field
推荐答案
我相信这或多或少是您要实现的目标:
I believe this is more or less what you are trying to achieve:
void main() {
runApp(MaterialApp(home: PassCodeExample()));
}
class PassCodeExample extends StatelessWidget {
FocusNode f1 = FocusNode();
FocusNode f2 = FocusNode();
FocusNode f3 = FocusNode();
FocusNode f4 = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: TextField(
focusNode: f1,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f1.unfocus();
FocusScope.of(context).requestFocus(f2);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f2,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f2.unfocus();
FocusScope.of(context).requestFocus(f3);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f3,
keyboardType: TextInputType.number,
onChanged: (String newVal) {
if (newVal.length == 1) {
f3.unfocus();
FocusScope.of(context).requestFocus(f4);
}
},
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
Flexible(
child: TextField(
focusNode: f4,
keyboardType: TextInputType.number,
decoration: InputDecoration(border: OutlineInputBorder()),
),
),
]),
),
),
);
}
}
您可以使用 onSubmitted
甚至为您的 TextField
s
You can achieve the same by using onSubmitted
or even supplying a unique TextEditingController
to your TextField
s
这篇关于在TextFormField Flutter中使用FocusNode的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!