在Flutter中获取TextField
组件的值通常有几种方法,常用的两种是使用TextEditingController
和Form
配合TextFormField
。
方法一:使用TextEditingController
TextEditingController
是一个控制器,用于读取和修改TextField
的内容。以下是如何使用它的一个示例:
-
定义TextEditingController 首先,在你的StatefulWidget中创建一个
TextEditingController
的实例。dartclass MyWidget extends StatefulWidget { _MyWidgetState createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { final _controller = TextEditingController(); void dispose() { _controller.dispose(); super.dispose(); } Widget build(BuildContext context) { return Container( child: TextField( controller: _controller, ), ); } }
-
获取TextField的值 你可以在任何时刻通过
_controller.text
来获取TextField
的当前值。dartvoid _printTextFieldValue() { print("当前输入的值是: ${_controller.text}"); }
方法二:使用Form
和TextFormField
当你的表单比较复杂或需要使用到表单验证时,使用Form
和TextFormField
可能是更好的选择。
-
使用Form和TextFormField 创建一个
Form
并在其中使用TextFormField
。你可以为TextFormField
提供一个onSaved
回调来在表单保存时获取值。dartclass MyFormWidget extends StatefulWidget { _MyFormWidgetState createState() => _MyFormWidgetState(); } class _MyFormWidgetState extends State<MyFormWidget> { final _formKey = GlobalKey<FormState>(); String _userInput = ''; Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: <Widget>[ TextFormField( onSaved: (value) { _userInput = value; }, ), ElevatedButton( onPressed: _saveForm, child: Text('提交'), ), ], ), ); } void _saveForm() { final isValid = _formKey.currentState.validate(); if (isValid) { _formKey.currentState.save(); print("用户输入的值是: $_userInput"); } } }
在这个示例中,我们使用_formKey
来控制表单,使用_userInput
来存储用户输入的值。当用户按下提交按钮时,如果表单通过验证,它将保存表单并打印出用户输入的值。
总结
选择哪种方法取决于你的具体需求。如果是简单的输入框,TextEditingController
就足够了。如果是复杂的表单验证,建议使用Form
和TextFormField
。
2024年8月8日 00:31 回复