Flutter 中如何使用 TextField 和 TextFormField？

推荐答案

在 Flutter 中，TextField 和 TextFormField 是用于处理用户输入的常用组件。以下是它们的基本用法：

TextField 的基本用法

-- -------------------- ---- -------
----------
  ----------- ----------------
    ---------- ------ ---- ----------
    --------- -----------
    ------- ---------------------
  --
  ---------- ------- -
    ---------- ---- ------ ---------
  --
--

TextFormField 的基本用法

-- -------------------- ---- -------
--------------
  ----------- ----------------
    ---------- ------ ---- ----------
    --------- -----------
    ------- ---------------------
  --
  ---------- ------- -
    -- ------ -- ---- -- -------------- -
      ------ ------- ----- ---- ------
    -
    ------ -----
  --
--

使用 TextFormField 结合 Form

-- -------------------- ---- -------
----- -------- - -----------------------

-----
  ---- ---------
  ------ -------
    --------- -
      --------------
        ----------- ----------------
          ---------- ------ ---- -------
          --------- --------
          ------- ---------------------
        --
        ---------- ------- -
          -- ------ -- ---- -- -------------- -
            ------ ------- ----- ---- ------
          -
          ------ -----
        --
      --
      ---------------
        ---------- -- -
          -- ----------------------------------- -
            -- ------- ----
          -
        --
        ------ ---------------
      --
    --
  --
--

本题详细解读

TextField 和 TextFormField 的区别

• TextField: 是一个简单的输入框，通常用于不需要验证的场景。它提供了基本的输入功能，并且可以通过 onChanged 回调来监听用户输入的变化。

• TextFormField: 是 TextField 的扩展，通常用于需要验证的场景。它可以与 Form 组件结合使用，通过 validator 属性来验证用户输入的内容。

TextField 的主要属性

• decoration: 用于设置输入框的外观，如标签、提示文本、边框等。
• onChanged: 当用户输入内容发生变化时触发的回调。
• controller: 用于控制输入框的内容，通常用于获取或设置输入框的值。

TextFormField 的主要属性

• decoration: 与 TextField 相同，用于设置输入框的外观。
• validator: 用于验证用户输入的内容，返回一个字符串表示错误信息，返回 null 表示验证通过。
• controller: 与 TextField 相同，用于控制输入框的内容。

使用 Form 进行表单验证

Form 组件可以包含多个 TextFormField，并且可以通过 GlobalKey<FormState> 来管理表单的状态。通过调用 _formKey.currentState!.validate() 可以触发所有 TextFormField 的 validator 方法，从而进行表单验证。

示例代码解析

• TextField 示例: 展示了如何使用 TextField 来创建一个简单的输入框，并通过 onChanged 回调来监听用户输入的变化。

• TextFormField 示例: 展示了如何使用 TextFormField 来创建一个带有验证功能的输入框，并通过 validator 属性来验证用户输入的内容。

• Form 示例: 展示了如何将 TextFormField 与 Form 组件结合使用，通过 GlobalKey<FormState> 来管理表单的状态，并在用户点击按钮时触发表单验证。

通过这些示例，你可以了解如何在 Flutter 中使用 TextField 和 TextFormField 来处理用户输入，并根据需要进行表单验证。