我是新手。 我正在尝试放置2个文本字段，即电子邮件和密码。 还有一个登录按钮。 如果用户单击登录按钮，我要检查文本字段中的值。如果它是“用户名和密码= 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)),
),
],
),
)
],
),
),
);}}
如果我卸下控制器，则文本字段中的值有效。但是，如果不使用控制器，我就不热衷于获取文本。
答案 0 :(得分：1)
您正在使用无状态窗口小部件，这意味着每次UI更改时（例如，当您切换到下一个字段时）都会创建它的全新实例。这包括您的控制器-当您将焦点从一个字段更改为另一个字段时，它们会重新初始化，这就是为什么它们会重置为空白值的原因。
您需要使用一个有状态的小部件，并在build()方法之外初始化控制器。这样，当用户界面更改时，它会被重建，但包括控制器及其值的小部件的状态将保持不变。
如果您使用的是Android Studio，则只需在class LoginPage extends StatelessWidget {行上的任意位置单击，然后按Alt + Enter，然后单击“转换为StatefulWidget”。 VSCode中也有它的快捷方式，但我不知道。
答案 1 :(得分：0)
您应该将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是有效的输入，否则将不提交。
答案 2 :(得分：0)
听起来像您正在寻找onChanged https://docs.flutter.io/flutter/material/TextField/TextField.html
TextField参数
TextField('foo', onChanged((s) => setState(() => myText = s)))