乐闻世界logo
搜索文章和话题

如何在flutter中获取TextField值

4 个月前提问
4 个月前修改
浏览次数20

1个答案

1

在Flutter中获取TextField组件的值通常有几种方法,常用的两种是使用TextEditingControllerForm配合TextFormField

方法一:使用TextEditingController

TextEditingController是一个控制器,用于读取和修改TextField的内容。以下是如何使用它的一个示例:

  1. 定义TextEditingController 首先,在你的StatefulWidget中创建一个TextEditingController的实例。

    dart
    class 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, ), ); } }
  2. 获取TextField的值 你可以在任何时刻通过_controller.text来获取TextField的当前值。

    dart
    void _printTextFieldValue() { print("当前输入的值是: ${_controller.text}"); }

方法二:使用FormTextFormField

当你的表单比较复杂或需要使用到表单验证时,使用FormTextFormField可能是更好的选择。

  1. 使用Form和TextFormField 创建一个Form并在其中使用TextFormField。你可以为TextFormField提供一个onSaved回调来在表单保存时获取值。

    dart
    class 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就足够了。如果是复杂的表单验证,建议使用FormTextFormField

2024年8月8日 00:31 回复

你的答案