Проблема получения значения из текстового поля во флаттере - PullRequest
Новая
       13

Проблема получения значения из текстового поля во флаттере

0 голосов
/ 19 февраля 2019

Я новичок, чтобы трепетать.Я пытаюсь разместить 2 текстовых поля, а именно адрес электронной почты и пароль.И одна кнопка входа.Если пользователь нажимает кнопку входа в систему, я хочу проверить значение в текстовом поле.Если это "username and password = admin", я хочу напечатать сообщение "Вход в систему успешен".Чтобы получить значение в текстовом поле, я использовал controller , чтобы получить текст.но если я использую контроллер, когда я переключаюсь на следующее текстовое поле, значение в первом автоматически удаляется .Я не знаю, в чем проблема. 

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'stacked_icons.dart';
import 'main.dart';

class LoginPage extends StatelessWidget {
final emailController =  TextEditingController();
final passwordController = TextEditingController();

@override
Widget build(BuildContext context) {    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.orange, //or set color with: Color(0xFF0000FF)
));

return new Scaffold(
  appBar: new AppBar(
      backgroundColor:Colors.transparent,
      elevation: 0.0,
      iconTheme: new IconThemeData(color: Color(0xFF18D191))),
  body: Container(
    width: double.infinity,
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        new StakedIcons(),
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 8.0, bottom: 80.0),
              child: new Text(
                "Village",
                style: new TextStyle(fontSize: 30.0),
              ),
            )
          ],
        ),
        Padding(
          padding:
          const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),

          child: TextField(

              controller: emailController,
            decoration:
            new InputDecoration(labelText: 'Email'),
          ),
        ),
        new SizedBox(
          height: 15.0,
        ),
        Padding(
          padding:
          const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
          child: TextField(
            obscureText: true,
            decoration: InputDecoration(labelText: 'Password'),
            //controller: passwordController
          ),
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 20.0, right: 5.0, top: 10.0),
                child: GestureDetector(
                  onTap: () {
                    debugPrint(passwordController.text+emailController.text);
                 },
                  child: new Container(
                      alignment: Alignment.center,
                      height: 60.0,
                      decoration: new BoxDecoration(
                          color: Color(0xFF18D191),
                          borderRadius: new BorderRadius.circular(9.0)),
                      child: new Text("Login",
                          style: new TextStyle(
                              fontSize: 20.0, color: Colors.white))),
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(
                    left: 10.0, right: 20.0, top: 10.0),
                child: new Container(
                    alignment: Alignment.center,
                    height: 60.0,
                    child: new Text("Forgot Password?",
                        style: new TextStyle(
                            fontSize: 17.0, color: Color(0xFF18D191)))),
              ),
            )
          ],
        ),
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom:18.0),
                child: new Text("Create A New Account ",style: new TextStyle(
                    fontSize: 17.0, color: Color(0xFF18D191),fontWeight: FontWeight.bold)),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);}}

Если я удаляю контроллер, значение в текстовом поле работает.Но без использования контроллера я не знаю, как получить текст.

Ответы [ 3 ]

0 голосов
/ 19 февраля 2019

Звучит так, как будто вы ищете onChanged параметр TextField https://docs.flutter.io/flutter/material/TextField/TextField.html

TextField('foo', onChanged((s) => setState(() => myText = s)))
0 голосов
/ 19 февраля 2019

Вы используете виджет без сохранения состояния, что означает, что каждый раз, когда изменяется пользовательский интерфейс, создается совершенно новый его экземпляр, например, когда вы переключаетесь на следующее поле.Это включает в себя ваши контроллеры - они переинициализируются при переключении фокуса с одного поля на другое, поэтому они сбрасываются на пустые значения.

Вам необходимо использовать виджет Stateful и инициализировать контроллеры вне build() метод.Таким образом, когда пользовательский интерфейс изменяется, он перестраивается, но состояние виджета, включая ваши контроллеры и их значения, сохраняется.

Если вы используете Android Studio, все, что вам нужно сделать, это щелкнуть в любом месте этой строкиclass LoginPage extends StatelessWidget {, затем нажмите Alt + Enter, затем нажмите «Преобразовать в StatefulWidget».Для этого в VSCode есть ярлык, но я его не знаю.

0 голосов
/ 19 февраля 2019

Вы должны обернуть свои поля email и password в виджет Form и изменить их тип на TextFormField, чтобы обеспечить функцию validator, чтобы ее можно было вызывать при нажатии кнопки: 

final _formKey = GlobalKey<FormState>();

Form(

  key: _formKey,

 child: Column(
 children: <widget>[
   Padding(
      padding:
      const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),

      child: TextFormField(
        controller: emailController,
        decoration:
        new InputDecoration(labelText: 'Email'),
        validator: //Your validator function here
      ),
    ),
    new SizedBox(
      height: 15.0,
    ),
    Padding(
      padding:
      const EdgeInsets.symmetric(horizontal: 20.0, vertical: 0.0),
      child: TextFormField(
        obscureText: true,
        decoration: InputDecoration(labelText: 'Password'),
        //controller: passwordController,
        validator: //Your validator function here
        ),
      ),
      new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(
                left: 20.0, right: 5.0, top: 10.0),
            child: GestureDetector(
              onTap: () {
                debugPrint(passwordController.text+emailController.text);
                 if(_formKey.currentState.validate()){
                    //This will only be reached if there both fields has valid input
                 }

             },
              child: new Container(
                  alignment: Alignment.center,
                  height: 60.0,
                  decoration: new BoxDecoration(
                      color: Color(0xFF18D191),
                      borderRadius: new BorderRadius.circular(9.0)),
                  child: new Text("Login",
                      style: new TextStyle(
                          fontSize: 20.0, color: Colors.white))),
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.only(
                left: 10.0, right: 20.0, top: 10.0),
            child: new Container(
                alignment: Alignment.center,
                height: 60.0,
                child: new Text("Forgot Password?",
                    style: new TextStyle(
                        fontSize: 17.0, color: Color(0xFF18D191)))),
          ),
        )
      ],
    ),
    ]
  ),
),

Это пример функции validator для вашего поля электронной почты: 

 validator: (val) => val.isEmpty ? 'Email is required' : null

val - текущий текст в поле, поэтому, когда результат равен nullформа будет знать, что val является действительным вводом, в противном случае она не будет отправлена.

...