在 TextFormField Flutter 中使用 FocusNode

Question

我有一个 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

Answer 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 来实现同样的效果

Answer 2

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

在 TextFormField Flutter 中使用 FocusNode

Using FocusNode in TextFormField Flutter

dart

flutter

flutter-layout