Flutter 文本字段

TextField 或 TextBox 是一个**输入元素**，用于保存字母数字数据，例如姓名、密码、地址等。它是一种 GUI 控制元素，使用户能够使用可编程代码**输入文本信息**。它可以是单行文本字段（当只需要一行信息时）或多行文本字段（当需要多于一行信息时）。

Flutter 中的 TextField 是最常用的**文本输入控件**，允许用户从键盘收集输入到应用程序中。我们可以使用 **TextField** 控件来构建表单、发送消息、创建搜索体验等等。默认情况下，Flutter 使用下划线装饰 TextField。我们还可以使用 InputDecoration 将多个属性添加到 TextField，例如标签、图标、内联提示文本和错误文本作为装饰。如果我们想完全删除装饰属性，则需要将装饰设置为 **null**。

以下代码解释了 Flutter 中 **TextFiled 控件的演示示例**

以下是 TextField 控件中使用的一些最常见的属性

• **decoration:** 它用于显示 TextField 周围的装饰。
• **border:** 它用于在 TextField 周围创建默认的圆角矩形边框。
• **labelText:** 它用于在选择 TextField 时显示标签文本。
• **hintText:** 它用于在 TextField 内部显示提示文本。
• **icon:** 它用于将图标直接添加到 TextField。

我们将通过以下步骤了解如何在 Flutter 应用程序中使用 TextField 控件

**步骤 1：**在您使用的 IDE 中创建一个 Flutter 项目。 在这里，我将使用 Android Studio。

**步骤 2：**在 Android Studio 中打开项目并导航到 **lib** 文件夹。 在此文件夹中，打开 **main.dart** 文件并导入 **material.dart** 包，如下所示

**步骤 3：**接下来，使用 void main run app 函数调用 main **MyApp 类**，然后创建您的主控件类，命名为 **MyApp extends with StatefulWidget**

**步骤 4：**接下来，我们需要在类控件构建区域中创建 Scaffold 控件 -> Column 控件，如下所示

**步骤 5：**最后，创建 TextField 控件，如下面的代码所示。

让我们看一下包含 TextField 控件的完整源代码。 此 Flutter 应用程序采用**两个 TextFields 和一个 RaisedButton**。 填写详细信息后，用户单击按钮。 由于我们没有在按钮的 **onPressed()** 属性中指定任何值，因此它无法将它们打印到控制台。

在 **main.dart** 文件中替换以下代码，并查看输出。

输出

当我们在 android 模拟器中运行应用程序时，我们应该得到类似于以下屏幕截图的 UI

如果我们单击文本框内部，我们可以看到键盘从屏幕底部出现，标签进入边框的左上角，提示文本显示在该字段中。 下面的屏幕截图更清楚地解释了这一点

如何检索 TextField 的值？

我们知道 Flutter 没有像 Android 中那样的 TextField 控件的 ID。 Flutter 允许用户**主要通过两种方式检索文本**：第一种是 onChanged 方法，另一种是 controller 方法。 下面将讨论这两种方法

**1. onChanged 方法：**这是检索文本字段值的最简单方法。 此方法将当前值存储在一个简单的变量中，然后在 TextField 控件中使用它。 下面是示例

**2. Controller 方法：**这是一种使用 **TextEditingController** 检索文本字段值的常用方法。 它将附加到 TextField 控件，然后侦听更改并控制控件的文本值。 下面是示例代码

用于侦听更改的示例代码。

用于获取或设置值的示例代码。

让我们详细了解第二种方法，以在 Flutter 应用程序中检索文本字段值，方法是按照以下步骤操作

1. 创建一个 TextEditingController。
2. 使用 controller 属性将 TextEditingController 附加到 TextField。
3. 通过使用 TextEditingController 提供的 **text()** 方法检索 TextField 的值。

现在，在您的 IDE 中创建一个新的 Flutter 项目并打开 **main.dart** 文件。 在 main.dart 文件中替换以下代码。 在此示例中，当用户点击按钮时，我们将显示带有文本字段的当前值的**警报对话框**。

输出

当我们在 android 模拟器中运行应用程序时，我们应该得到类似于以下屏幕截图的 UI

单击文本框内部并添加值，如字段中所示。 当我们按下**登录按钮**时，会出现一个警报对话框，其中包含用户输入到该字段中的文本。 如果我们单击 **OK** 按钮，警报对话框将消失。 查看下面的屏幕截图

如何使 TextField 可扩展？

有时，我们想要扩展 TextField，这意味着它可以有多行。 Flutter 可以通过添加属性 **maxLines** 并将其设置为 **null** 来非常容易地做到这一点，默认值为 1。我们还可以指定确切的值以默认扩展行数。

如何控制 TextField 值的大小？

TextField 控件还允许我们限制文本字段中的最大字符数。 我们可以通过添加 **maxLength** 属性来做到这一点，如下所示

如何模糊文本字段值？

模糊意味着使字段不易读取或理解。 模糊文本无法清晰地显示。 在 Flutter 中，它主要与包含密码的文本字段一起使用。 我们可以通过将 **obscureText** 设置为 **true** 来使 TextField 中的值模糊。