获取文本框的输入值 |
您所在的位置：网站首页 › 获取控件的值 › 获取文本框的输入值 |
|
description
bug_report
获取文本框的输入值
目录
1. 创建 TextEditingController 2. 把 TextEditingController 应用到 TextField 上 3. 展示文本框当前值 交互式样例 这个章节讲解的是如何获取文本框的输入值。 创建一个 TextEditingController 把 TextEditingController 应用到 TextField 上 展示文本框当前值 1. 创建 TextEditingController为了获取文本框输入值，需要创建一个 TextEditingController。在后续步骤中，这个 TextEditingController 将会被应用到 TextField 上。 TextEditingController 被应用于 TextField 或者 TextFormField 后，就可以使用它来获取文本框输入值。 记住:当不再使用 TextEditingController 时，请销毁它以确保相关的资源得到释放。 // Define a custom Form widget. class MyCustomForm extends StatefulWidget { const MyCustomForm({super.key}); @override State createState() => _MyCustomFormState(); } // Define a corresponding State class. // This class holds the data related to the Form. class _MyCustomFormState extends State { // 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. } } 2. 把 TextEditingController 应用到 TextField 上创建完 TextEditingController，就可以使用 controller 属性完成 text field 绑定。 return TextField( controller: myController, ); 3. 展示文本框当前值在 TextEditingController 作用于文本框后，就可以开始取值了。通过 TextEditingController 提供的 text() 方法，就能够获取到文本框输入值了。 在下面的示例中，用户点击浮层按钮，将会触发弹出一个对话框，对话框获取并显示文本框的当前值。 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), ), 交互式样例 import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.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({super.key}); @override State createState() => _MyCustomFormState(); } // Define a corresponding State class. // This class holds the data related to the Form. class _MyCustomFormState extends State { // 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), 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), ), ); } } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |