时间戳

首页 > 解决方案 > 在颤动中从文本字段中获取价值的问题

dart - 在颤动中从文本字段中获取价值的问题

问题描述

我是新来的。我正在尝试放置 2 个文本字段，即电子邮件和密码。和一个登录按钮。如果用户单击登录按钮，我想检查文本字段中的值。如果是“用户名和密码 = admin”，我想打印一条消息“登录成功”。为了获取文本字段中的值，我使用控制器来获取文本。但是如果我在切换到下一个文本字段时使用控制器，则第一个中的值会自动删除。我不知道是什么问题。

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

如果我删除控制器，则文本字段中的值有效。但是如果不使用控制器，我不知道如何获取文本。

标签： dartfluttertextfield

解决方案

您正在使用无状态小部件，这意味着每次 UI 更改时都会创建一个全新的实例，例如当您切换到下一个字段时。这包括您的控制器 - 当您将焦点从一个字段更改为另一个字段时，它们会重新初始化，这就是它们重置为空白值的原因。

您需要使用有状态小部件，并在build()方法之外初始化控制器。这样，当 UI 发生更改时，它会被重建，但小部件的状态（包括您的控制器及其值）会保持不变。

如果您使用的是 Android Studio，您需要做的就是单击此行的任意位置，class LoginPage extends StatelessWidget {然后按 Alt+Enter，然后单击“转换为 StatefulWidget”。VSCode 中也有一个快捷方式，但我不知道。

推荐阅读