dart 在Flutter中检测键盘事件

j91ykkif  于 5个月前  发布在  Flutter
关注(0)|答案(4)|浏览(108)

如何在Flutter中检测TextFormField上的键盘事件?如果用户删除最后一个字母并再次按下删除按钮,光标应跳回到上一个TextFormField。
我想实现一个引脚输入屏幕,类似的东西。
https://mobile-solutions.ingenico.com/wp-content/uploads/IMG_022.png

wnavrhmk

wnavrhmk1#

是的,您可以使用onChangeFocusScope来设置焦点

在这里,当您删除第二个FormField的最后一个字母时,焦点设置在第一个FormField

var firstField = FocusNode();
  var secondField = FocusNode();
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      TextFormField(
        focusNode: firstField,
        onChanged: (text) {
          print("First  field: $text");
        },
      ),
      TextFormField(
        focusNode: secondField,
        onChanged: (text) {
          if (text.length <= 0) {
            FocusScope.of(context).requestFocus(firstField);
          }
          print("Second  field: $text");
        },
      )
    ]);

字符串
}

yshpjwxd

yshpjwxd2#

要实现pin-enter屏幕,你不必管理键盘事件.由于该屏幕有不同的按钮,每个按钮都作为其文本输入.
因此,从逻辑上讲,您只需将按钮的值添加到列表中,并在按下删除键时从列表中删除该值。
您可以使用列表的长度和数据填充TextField。

camsedfj

camsedfj3#

我希望这个答案对你有帮助。我也遇到过类似的情况,我就是这样做的!

class _OtpEntryFormState extends StatelessWidget {

        final _formKey = GlobalKey<FormState>();

        //Declare your focusNodes
        FocusNode node1 = FocusNode();
        FocusNode node2 = FocusNode();
        FocusNode node3 = FocusNode();
        FocusNode node4 = FocusNode();

        String pin1;
        String pin2;
        String pin3;
        String pin4;

        @override
        Widget build(BuildContext context) {
          return Column(
            children: <Widget>[
              //Now create a row widget, where we'll be adding our textboxes
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[

                  //TextBox1
                  SizedBox(
                    width: 50,
                    child: TextFormField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: node1,
                      onChanged: (text) {
                        if (text.length == 1) {
                          FocusScope.of(context).requestFocus(node2);
                          pin1 = text;
                        } 
                      },
                      keyboardType: TextInputType.number,
                    )
                  ),

                  //Spacing in-between textbox
                  SizedBox(
                    width: 20
                  ),

                  //TextBox2
                  SizedBox(
                    width: 50,
                    child: TextFormField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: node2,
                      onChanged: (text) {
                        if (text.length == 1) {
                          FocusScope.of(context).requestFocus(node3);
                          pin2 = text;
                        } 
                        else if (text.isEmpty) {
                            FocusScope.of(context).requestFocus(node1);
                          }
                      },
                      keyboardType: TextInputType.number,
                    )
                  ),

                  //Spacing in-between textbox
                  SizedBox(
                    width: 20
                  ),

                  //TextBox3
                  SizedBox(
                    width: 50,
                    child: TextFormField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: node3,
                      onChanged: (text) {
                        if (text.length == 1) {
                          FocusScope.of(context).requestFocus(node4);
                          pin3 = text;
                        } 
                        else if (text.isEmpty) {
                            FocusScope.of(context).requestFocus(node2);
                          }
                      },
                    )
                  ),

                  //Spacing in-between textbox
                  SizedBox(
                    width: 20
                  ),

                  //TextBox4
                  SizedBox(
                    width: 50,
                    child: TextFormField(
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(1),
                      ],
                      focusNode: node4,
                      onChanged: (text) {
                        if (text.length == 1) {
                          FocusScope.of(context).requestFocus(node4);
                          pin4 = text;
                        } 
                        else if (text.isEmpty) {
                            FocusScope.of(context).requestFocus(node3);
                          }
                      },
                    )
                  ), 
                ],
              ),

              //Spacing Between the textbox row and the submit button
              SizedBox(
                height: 10,
              ),

              //Submit Button
              SizedBox(
                width: 30,
                child: RaisedButton(
                  color: Colors.blueAccent,
                  textColor: Colors.white,
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      String fullPin = pin1+pin2+pin3+pin4;

                      String combinedPin = fullPin; 

                      int intPin = int.parse(combinedPin);
                      print("OPT Pin: " + intPin.toString());
                    }
                  },
                  child: 
                    Text(
                      'SUBMIT',
                    )
                ),
              ),
            ],
          );
        }
      }

字符串

hwamh0ep

hwamh0ep4#

我知道这篇文章有点旧,但我也面临着类似的问题,在任何地方都找不到答案,但我最终想出了一些办法,所以这是我的答案,我做了这样的事情:

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(
              6,
              (index) => SizedBox(
                width: 40,
                child: KeyboardListener(
                    focusNode: FocusNode(),
                    onKeyEvent: (value) {
                      if (value.logicalKey.keyLabel == "Backspace") {
                        if (index > 0 && controllers[index].text.isEmpty) {
                          FocusScope.of(context)
                              .requestFocus(focusNodes[index - 1]);
                        }
                      }
                    },
                    child: TextField(
                      textCapitalization: TextCapitalization.characters,
                      textAlign: TextAlign.center,
                      controller: controllers[index],
                      focusNode: focusNodes[index],
                      style: TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12.0),
                          borderSide: BorderSide(
                            color: Colors.white,
                            width: 1.0,
                          ),
                        ),
                        filled: true,
                        fillColor: Colors.gray,
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(12.0),
                          borderSide: BorderSide(
                            color: Colors.blue,
                            width: 1.0,
                          ),
                        ),
                      ),
                      onChanged: (value) {
                        if (controllers[index].text.isNotEmpty) {
                          controllers[index].text = value[value.length - 1];
                        }
                        if (value.isNotEmpty) {
                          if (index < 5) {
                            FocusScope.of(context)
                                .requestFocus(focusNodes[index + 1]);
                          }
                        } else {
                          if (index > 0) {
                            FocusScope.of(context)
                                .requestFocus(focusNodes[index - 1]);
                          }
                        }
                      },
                    )),
              ),
            ),
          )

字符串
controllers是TextEditingControllers的列表,focusNode是FocusNode的列表。
基本上,将您的TextField Package 在KeyboardList中,这样您就可以监听退格键事件。处理输入不为空的情况,使用TextField的onChanged,以及输入为空的情况,使用KeyboardList。希望这对今天仍然有这个问题的人有所帮助!

相关问题