在Flutter从文本字段中检索数据

在本文中，我们将学习如何从 TextFields 检索数据。 TextField() 小部件是flutter应用程序中最常用的用于获取用户输入的小部件。我们将讨论用于从 TextField 中提取文本的两种主要方法。

使用变量：

TextField小部件具有各种回调属性，我们可以通过它们提取文本。主要是使用onChanged ，因为它对TextField 中发生的每个更改都进行输入。当以编程方式更改TextField 的文本时，此回调不起作用。基本上，这种变化是由应用程序本身发起的。

Syntax:
TextField(
   onChanged: (value) {
       print("The value entered is : $value");
   }
)

各种其他回调也可用于TextField，如onTap、onSubmitted、onEditingComplete。

• onTap：除了双击的每第二次敲击之外，每个唯一的敲击都会调用它。在内部，它构建了一个GestureDetector来处理这种事件。每当您想触发基于手势的 TextField 的某些属性时，您都可以使用它。
• onSubmitted：每当用户指示他们已完成编辑文本时调用它。首先，每当按下键盘上的完成按钮时，它将被调用并存储输入的数据。
• onEditingComplete：它与onSubmitted非常相似。唯一的区别是每当按下键盘右下角的按钮时都会调用它。它可能是“完成”、“发送”、“去”或“搜索”。

例子：

下面是TextField中onChanged的示例。在这里，我们使用了一个匿名函数来接收来自onChanged的回调。来自回调的值在value 中接收，然后我们将它传递给我们的变量title 。

Dart

import "package:flutter/material.dart";
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}
  
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
  
class _HomeState extends State {
  // var to store
  // onChanged callback
  String title;  
  String text = "No Value Entered";
  
  void _setText() {
    setState(() {
      text = title;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(15),
            child: TextField(
              decoration: InputDecoration(labelText: 'Title'),
                
              onChanged: (value) => title = value, 
                
            ),
          ),
          SizedBox(
            height: 8,
          ),
          RaisedButton(
            onPressed: _setText,
            child: Text('Submit'),
            elevation: 8,
          ),
          SizedBox(
            height: 20,
          ),
          Text(text),  
          // changes in text 
          // are shown here
        ],
      ),
    );
  }
}

输出

使用控制器：

另一种检索文本的方法是使用控制器。这是flutter随TextField提供的属性。以下是解释控制器使用的步骤。

• 首先，创建一个TextEditingController ()类的对象。它是flutter提供的默认类。
• 将创建的对象连接到TextField的控制器。
• 现在，您可以创建一个函数来获取最新值。

它的工作方式与onChanged几乎相同。但是，在某些情况下，最好使用控制器，因为检索过程由flutter引擎管理。

例子：

下面的示例说明了使用控制器从TextField检索值。首先，创建一个TextEditingController类型的对象。然后我们将此对象分配给TextField的控制器属性。

Dart

import "package:flutter/material.dart";
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}
  
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
  
class _HomeState extends State {
  final titleController = TextEditingController();
  String text = "No Value Entered";
  
  void _setText() {
    setState(() {
      text = titleController.text;
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(15),
            child: TextField(
              decoration: InputDecoration(labelText: 'Title'),
                
              controller: titleController,
                
            ),
          ),
          SizedBox(
            height: 8,
          ),
          RaisedButton(
            onPressed: _setText,
            child: Text('Submit'),
            elevation: 8,
          ),
          SizedBox(
            height: 20,
          ),
          Text(text),
        ],
      ),
    );
  }
}

输出

这两种方法都可以用于检索文本，因为两者的输出是相同的。在这里，我们不得不重新运行 build 方法来更新文本，因此我们使用了一个有状态的小部件。如果在您的程序中，您只想存储该值，也可以使用无状态小部件。