Question

您是否知道如何在Flutter中检测TextFormField上的键盘事件？所以我的目标是如果用户删除了最后一个字母并再次按下删除按钮，则光标会跳回到之前的TextFormField。

我想实现一个pin-enter屏幕，就像那个。

https://mobile-solutions.ingenico.com/wp-content/uploads/IMG_022.png

Answer 1

要实现pin-enter屏幕，您不必管理键盘事件。由于该屏幕具有不同的按钮，每个按钮将该条目作为其文本。

所以逻辑上你只需要将按钮的值添加到列表中，并在按下删除键时从列表中删除值。

您可以使用列表的长度和数据填充TextField。

Answer 2

是的，您可以使用onChange（）和focusnod来实现。当您删除第一个FormField上设置的第二个FormField焦点的最后一个字母时

var date = document.querySelector("#date");
  var item = document.querySelector("#item");
  var sn = document.createElement("div");
  var sp = document.createElement("div");
  var txt = document.getElementById("text").value;
  date.appendChild(sn);
  item.appendChild(sp);
  date.removeAttribute("id");
  item.removeAttribute("id");
  sn.setAttribute("id", "date");
  sp.setAttribute("id", "item");
  sn.append(today);
  sp.append(txt);
  document.getElementById("text").value = "";
});

Answer 3

希望此答案对您有所帮助。我遇到了类似的情况，这就是我的做法！

        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',
                    )
                ),
              ),
            ],
          );
        }
      }

在Flutter中检测键盘事件

3 个答案: