在TextFormField Flutter中使用FocusNode

Taio 发表于 Dev

尾尾

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

阿齐扎

我相信这或多或少是您想要达到的目标：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。