如何在flutter中获取TextField值
Posted
技术标签:
【中文标题】如何在flutter中获取TextField值【英文标题】：How to get the TextField value in flutter 【发布时间】：2019-01-18 16:35:37 【问题描述】：我已经在 Flutter 中创建了注册屏幕。我想在FlatButton的onPressed中获取邮箱和密码。
有谁知道如何在颤振中做到这一点？
Widget SignupPage()
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
colorFilter: new ColorFilter.mode(
Colors.black.withOpacity(0.05), BlendMode.dstATop),
image: AssetImage('assets/images/mountains.jpg'),
fit: BoxFit.cover,
),
),
child: new Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(100.0),
child: Center(
child: Icon(
Icons.headset_mic,
color: Colors.redAccent,
size: 50.0,
),
),
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"CONFIRM PASSWORD",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: '*********',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 20.0),
child: new FlatButton(
child: new Text(
"Already have an account?",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
textAlign: TextAlign.end,
),
onPressed: () => ,
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 50.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => authHandler.handleSignInEmail(emailController.text, passwordController.text)
.then((FirebaseUser user)
Navigator.push(context, new MaterialPageRoute(builder: (context) => HomePage()));
).catchError((e) => print(e)),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"SIGN UP",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
));
【问题讨论】：
【参考方案1】：在State 类中创建TextEditingController 作为全局变量，并将其设置到TextField 小部件中。
TextEditingController emailController = new TextEditingController();
....
TextField(
controller: emailController,
obscureText: true,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
)
现在您可以使用：
emailController.text
您可以在这里获取更多信息：https://flutter.dev/docs/cookbook/forms/retrieve-input
【讨论】：
我有 3 个 TextFields，我需要 3 个 TextEditingController？ 是的，或者您可以使用每个文本字段的 onChanged 方法并将值保存到每个文本字段的本地变量中 @diegoveloper 我在一个表单中有 10 个文本字段和下拉按钮字段。有什么方法可以获取所有元素的值吗？或者我是否必须通过 TextEditingController.text 函数一个一个地获取每个元素的值？请建议。谢谢。【参考方案2】：另一个更简单（我认为）的选项是在包含字符串的 TextField 类中添加“onChanged”属性
String enteredText .... TextField( onChanged: (newText) enteredText = newText; ,
【讨论】：
onChanged 将在每个字符更改时触发，对吗？【参考方案3】：
每当用户更改字段中的文本时，文本字段都会调用onChanged 回调。如果用户指示他们已完成在字段中的输入（例如，通过按下软键盘上的按钮），则文本字段将调用 onSubmitted 回调。
使用此回调，我们可以设置instance variables 并在提交按钮的onPress 上使用这些变量。
【讨论】：
【参考方案4】：在构建方法之前制作 TextEditingController。
TextEditingController yourControllerName = new TextEditingController();
然后在 TextField 中，像这样传递控制器：
TextField(
controller: yourNameController,
// your extra stuff
)
假设你想在一个文本中访问它，像这样访问它：
Text(
yourControllerName.text.toString(), // this will convert your controller to String
)
谢谢，希望成功！！！
【讨论】：
【参考方案5】： TextEditingController emailController = new TextEditingController(); …… 文本域（ 控制器：电子邮件控制器， 模糊文本：真， textAlign: TextAlign.left, 装饰：输入装饰（ 边框：InputBorder.none， hintText: '请输入您的电子邮箱', 提示样式：TextStyle（颜色：Colors.grey）， ), ) emailController.text【讨论】：
以上是关于如何在flutter中获取TextField值的主要内容，如果未能解决你的问题，请参考以下文章
在 Flutter 中保留方向更改时的 TextField 值
Flutter：使用初始值文本时如何隐藏TextField文本指针（光标）（Android）