在 TextFormField Flutter 中使用 FocusNode答案

【问题标题】：Using FocusNode in TextFormField Flutter在 TextFormField Flutter 中使用 FocusNode
【发布时间】：2019-01-25 08:19:38
【问题描述】：

我有一个应该接收数字的TextFormField。在输入第一个数字时，它应该跳转到第二个TextFormField，然后跳转到第三个 TextFormField。每个TextFormField 都有FocusNode 属性，我只是不知道如何使用它。我有这个

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

【问题讨论】：

标签： dart flutter flutter-layout

【解决方案1】：

我相信这或多或少是您想要实现的目标：

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 甚至为您的TextFields 提供唯一的TextEditingController 来实现相同的目的

【讨论】：

onSubmitted 在用户单击键盘上的提交按钮时被调用，但是当使用密码时，您不希望用户单击提交按钮，而是检测用户是否有在每个文本字段中输入一个字符，因此您需要的是 onChanged
知道了。查看我发布的另一个关于“如何保存文本字段中的值”的问题。我无法检索 TextField 的值
我在那里回答了你，你只是将 sth 分配给 newVal 而不是将 newVal 分配给 sth

【解决方案2】：

如果您将 Textfield/TextFormField 作为 Form 的子级，大多数情况下该问题将得到解决。

【讨论】：