Flutter中点击提交按钮后在用户名输入框下方动态添加TextFormField的实现方法

这其实是Flutter声明式UI里动态控制Widget数量的典型场景，核心就是靠状态管理触发UI更新就行。我给你整理了具体的实现步骤和修改后的完整代码：

核心思路 #

Flutter的UI是跟着状态走的，所以我们可以用一个列表来存储新增的输入框，点击提交按钮时往列表里加新的TextFormField，再调用setState()让页面刷新，就能自动显示新增的输入框了。

具体实现步骤 #

1. 在State类里加状态变量

首先在你的页面对应的State类中，添加两个列表：一个存新增的输入框Widget，另一个存对应的控制器（避免内存泄漏）：

List<Widget> _additionalFields = [];
List<TextEditingController> _additionalControllers = [];

2. 调整UI结构

把原来的Column子组件调整一下，在用户名输入框和提交按钮之间插入我们的新增输入框列表：

Column(
  children: [
    // 原标题容器
    Container(
      padding: const EdgeInsets.all(10),
      child: Text("Reset Password"),
    ),
    // 原说明文本容器
    Container(
      child: Center(
        child: Expanded(
          child: Text(
            "Enter your username below to recieve password reset instruction",
            textAlign: TextAlign.center,
            maxLines: 2,
          ),
        ),
      ),
    ),
    // 原用户名输入框
    TextFormField(
      controller: userNameController,
      textInputAction: TextInputAction.next,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        labelText: "User Name",
      ),
      focusNode: fnField1,
      validator: (value) {
        if (value?.isEmpty == true) {
          return AppLocalizations.of(context)!.valEnterUserName;
        }
        return null;
      },
    ),
    // 新增的输入框列表（关键！）
    ..._additionalFields,
    // 原提交按钮
    Container(
      constraints: const BoxConstraints(minWidth: double.infinity),
      child: ElevatedButton(
        onPressed: () async {
          // 这里写点击后的逻辑，下面会说
        },
        child: Text("Submit"),
      ),
    ),
  ],
)

3. 修改提交按钮的点击逻辑

在ElevatedButton的onPressed回调里，先验证原表单（可选，看你需求），然后创建新的控制器和输入框，更新状态：

onPressed: () async {
  // 先验证原用户名输入框（可选）
  if (_formKey.currentState!.validate()) {
    // 创建新的输入框控制器
    TextEditingController newFieldController = TextEditingController();
    _additionalControllers.add(newFieldController);
    
    // 更新状态，添加新的TextFormField
    setState(() {
      _additionalFields.add(
        TextFormField(
          controller: newFieldController,
          textInputAction: TextInputAction.next,
          keyboardType: TextInputType.text,
          decoration: InputDecoration(
            labelText: "New Field", // 你可以自定义这个输入框的标签
          ),
          // 可选：给新输入框加验证逻辑
          validator: (value) {
            if (value?.isEmpty == true) {
              return "Please fill this field";
            }
            return null;
          },
        ),
      );
    });
  }
},

4. 清理控制器（重要！）

为了避免内存泄漏，一定要在State的dispose方法里销毁所有新增的控制器：

@override
void dispose() {
  // 销毁原用户名控制器
  userNameController.dispose();
  // 销毁所有新增的控制器
  for (var controller in _additionalControllers) {
    controller.dispose();
  }
  super.dispose();
}

额外说明 #

如果你的需求只是添加一次输入框，不想支持多次点击添加，那可以简化成用一个布尔变量：

bool _showNewField = false;

点击提交按钮时把_showNewField设为true，然后在UI里用：

if (_showNewField) {
  TextFormField(
    // 输入框配置
  ),
}

这样更简单，不用维护列表~

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari