获取文本框的输入值
这个章节讲解的是如何获取文本框的输入值。
In this recipe, learn how to retrieve the text a user has entered into a text field using the following steps:
步骤
Directions
-
创建一个
TextEditingController
Create a
TextEditingController
. -
把
TextEditingController
应用到TextField
上Supply the
TextEditingController
to aTextField
. -
展示文本框当前值
Display the current value of the text field.
TextEditingController
1. 创建
TextEditingController
1. Create a 为了获取文本框输入值,需要创建一个 TextEditingController
。在后续步骤中,这个 TextEditingController
将会被应用到 TextField
上。
To retrieve the text a user has entered into a text field,
create a TextEditingController
and supply it to a TextField
or TextFormField
.
TextEditingController
被应用于 TextField
或者 TextFormField
后,就可以使用它来获取文本框输入值。
Once a TextEditingController
is supplied to a TextField
or TextFormField
,
we can use it to retrieve the text a user has typed into that text field.
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
// Create a text controller and use it to retrieve the current value
// of the TextField.
final myController = TextEditingController();
@override
void dispose() {
// Clean up the controller when the widget is disposed.
myController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// Fill this out in the next step.
}
}
TextEditingController
应用到 TextField
上
2. 把
TextEditingController
to a TextField
2. Supply the 创建完 TextEditingController
,就可以使用 controller
属性完成 text field 绑定。
Now that you have a TextEditingController
, wire it up
to a text field using the controller
property:
TextField(
controller: myController,
);
3. 展示文本框当前值
3. Display the current value of the text field
在 TextEditingController
作用于文本框后,就可以开始取值了。通过 TextEditingController
提供的 text()
方法,就能够获取到文本框输入值了。
After supplying the TextEditingController
to the text field,
begin reading values. Use the text()
method provided by the TextEditingController
to retrieve the
String that the user has entered into the text field.
在下面的示例中,用户点击浮层按钮,将会触发弹出一个对话框,对话框获取并显示文本框的当前值。
The following code displays an alert dialog with the current value of the text field when the user taps a floating action button.
FloatingActionButton(
// When the user presses the button, show an alert dialog containing the
// text that the user has entered into the text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has entered by using the
// TextEditingController.
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
);
交互式样例
Interactive example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Retrieve Text Input',
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
// Create a text controller and use it to retrieve the current value
// of the TextField.
final myController = TextEditingController();
@override
void dispose() {
// Clean up the controller when the widget is disposed.
myController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Retrieve Text Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: myController,
),
),
floatingActionButton: FloatingActionButton(
// When the user presses the button, show an alert dialog containing
// the text that the user has entered into the text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the that user has entered by using the
// TextEditingController.
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}