如何通过ListView.builder实现带TextFormField的动态卡片且保留输入内容

问题原因 #

你的代码出现输入内容清空的核心问题有2个：

1. 你把TextEditingController的创建逻辑写在了卡片构建方法cardslist()中，每次点击添加按钮触发setState后，页面会重绘所有已存在的卡片，每张旧卡片都会被分配新的空白控制器，原有输入自然就丢失了。
2. 动态生成的列表项没有绑定唯一标识Key，Flutter渲染时无法精准对应每个卡片的状态，也会增加状态丢失的概率。

修复方案 #

你只需要把控制器的创建逻辑移到添加卡片的触发方法里，同时给列表项绑定Key即可，修改后的完整代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget {
  const CardWithTextformfield({Key? key}) : super(key: key);

  @override
  _CardWithTextformfieldState createState() => _CardWithTextformfieldState();
}

class _CardWithTextformfieldState extends State<CardWithTextformfield> {
  // 存储所有卡片的控制器
  List<TextEditingController> nameControllers = [];
  List<TextEditingController> idControllers = [];

  int cardCount = 0;
  // 卡片上限为10张
  final int maxCardCount = 10;

  void incrementCard() {
    setState(() {
      if (cardCount >= maxCardCount) {
        return;
      }
      // 新增卡片时才创建新的控制器，添加到数组中
      nameControllers.add(TextEditingController());
      idControllers.add(TextEditingController());
      cardCount++;
    });
  }

  @override
  void dispose() {
    // 页面销毁时释放所有控制器，避免内存泄漏
    for (var controller in nameControllers) {
      controller.dispose();
    }
    for (var controller in idControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: incrementCard,
        child: const Icon(Icons.add),
      ),
      body: ListView.builder(
        itemCount: cardCount,
        itemBuilder: (context, index) {
          // 直接通过下标取对应卡片的控制器，不会重复创建
          return Card(
            // 给每个卡片绑定唯一Key，保证渲染状态对应正确
            key: ValueKey('card_$index'),
            margin: const EdgeInsets.all(10),
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Container(
                      margin: EdgeInsets.all(10),
                      child: Text('Name: ')),
                  Expanded(
                    child: TextFormField(
                      controller: nameControllers[index],
                      decoration: const InputDecoration(hintText: 'Name'),
                    ),
                  ),
                  const Container(
                    margin: EdgeInsets.all(10),
                    child: Text('EmpId: '),
                  ),
                  Expanded(
                    child: TextFormField(
                      controller: idControllers[index],
                      decoration: const InputDecoration(hintText: 'EmpId'),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

额外优化点 #

• 新增了控制器释放逻辑dispose，避免内存泄漏
• 把卡片上限统一抽成了变量maxCardCount，后续调整更方便
• 移除了冗余的cardslist方法，直接在itemBuilder中构建卡片，逻辑更清晰

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