获取文本框的输入值
这个章节讲解的是如何获取文本框的输入值。
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 { const MyCustomForm({Key? key}) : super(key: key); @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:
return 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: () { showDialog( context: context, builder: (context) { return AlertDialog( // Retrieve the text that the user has entered by using the // TextEditingController. content: Text(myController.text), ); }, ); }, tooltip: 'Show me the value!', child: const Icon(Icons.text_fields), ),
交互式样例
Interactive example
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Retrieve Text Input',
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
const MyCustomForm({Key? key}) : super(key: key);
@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: const 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: () {
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: const Icon(Icons.text_fields),
),
);
}
}