Использование FocusNode в TextFormField Flutter

У меня есть 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

flutter dart flutter-layout
person Taio    schedule 18.08.2018    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Я считаю, что это более или менее то, чего вы пытаетесь достичь:

введите описание изображения здесь

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.

person Shady Aziza    schedule 18.08.2018
comment
onSubmitted вызывается, когда пользователь нажимает кнопку отправки на клавиатуре, однако при использовании кода доступа вы не хотите, чтобы пользователь нажимал кнопку отправки, а вместо этого определяете, ввел ли пользователь один символ в каждое текстовое поле, следовательно, что вам нужно это onChanged - person Shady Aziza; 19.08.2018
comment
Понятно. Ознакомьтесь с другим вопросом, который я опубликовал о том, «как сохранить значения из текстового поля». Я не могу получить значения TextField - person Taio; 19.08.2018
comment
Я ответил вам там, вы просто назначили sth на newVal вместо того, чтобы назначить newVal на sth - person Shady Aziza; 19.08.2018

arrow_upward
0
arrow_downward

В большинстве случаев проблема будет решена, если вы разместите свое Textfield/TextFormField как дочернее для Form.

person hossein    schedule 08.10.2020