Flutter中通过循环动态创建TextField的问题求助

1. 解决int.parse解析失败问题 #

直接用int.parse(setController.text)会在输入为空或非数字时崩溃，换成int.tryParse做安全解析，同时加默认值兜底：

// 解析输入的组数，失败时默认设为0
int? groupCount = int.tryParse(setController.text);
int count = groupCount ?? 0;

2. 解决TextField值同步变化问题 #

你所有动态生成的ItemTextField都共用了同一个eSetController，导致输入时所有字段同步更新。要给每个TextField分配独立的控制器：

• 维护一个控制器列表存储每个TextField的控制器：

// 初始化空列表
List<TextEditingController> textControllers = [];

// 当组数变化时更新控制器列表
void updateTextControllers(int count) {
  textControllers.clear();
  for (int i = 0; i < count; i++) {
    textControllers.add(TextEditingController());
  }
  setState(() {}); // 触发UI刷新
}

// 循环生成TextField时，对应使用列表里的控制器
for(int i = 0 ; i < count ; i++)
  ItemTextField(controller: textControllers[i], themeData: themeData),

3. 将数据保存至repository #

保存时遍历控制器列表，提取所有输入值后调用repository的保存方法；编辑时从repository加载数据并初始化控制器：

// 保存数据到repository
void saveData() {
  List<String> inputValues = textControllers.map((controller) => controller.text.trim()).toList();
  // 替换成你的repository保存逻辑
  yourRepository.saveGroupData(inputValues);
}

// 从repository加载数据用于编辑
void loadData() {
  List<String> savedData = yourRepository.getGroupData();
  textControllers = savedData.map((value) => TextEditingController(text: value)).toList();
  setState(() {});
}

注意：页面销毁时要释放控制器资源，避免内存泄漏：

@override
void dispose() {
  setController.dispose();
  for (var controller in textControllers) {
    controller.dispose();
  }
  super.dispose();
}

完整示例片段 #

class DynamicTextFieldPage extends StatefulWidget {
  @override
  State<DynamicTextFieldPage> createState() => _DynamicTextFieldPageState();
}

class _DynamicTextFieldPageState extends State<DynamicTextFieldPage> {
  final TextEditingController setController = TextEditingController();
  List<TextEditingController> textControllers = [];
  late ThemeData themeData;

  @override
  void dispose() {
    setController.dispose();
    for (var controller in textControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  void updateTextFieldCount() {
    int? count = int.tryParse(setController.text);
    if (count != null && count >= 0) {
      updateTextControllers(count);
    }
  }

  void updateTextControllers(int count) {
    textControllers.clear();
    for (int i = 0; i < count; i++) {
      textControllers.add(TextEditingController());
    }
    setState(() {});
  }

  void saveToRepository() {
    List<String> values = textControllers.map((c) => c.text.trim()).toList();
    // 替换为你的repository实际保存逻辑
    GroupRepository.instance.save(values);
  }

  void loadFromRepository() {
    List<String> savedValues = GroupRepository.instance.getSavedData();
    textControllers = savedValues.map((v) => TextEditingController(text: v)).toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    themeData = Theme.of(context);
    return Scaffold(
      body: Column(
        children: [
          TextField(
            controller: setController,
            keyboardType: TextInputType.number,
            onChanged: (_) => updateTextFieldCount(),
            decoration: const InputDecoration(hintText: "输入组数"),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: textControllers.length,
              itemBuilder: (context, index) {
                return ItemTextField(controller: textControllers[index], themeData: themeData);
              },
            ),
          ),
          ElevatedButton(
            onPressed: saveToRepository,
            child: const Text("保存数据"),
          ),
          ElevatedButton(
            onPressed: loadFromRepository,
            child: const Text("加载数据"),
          ),
        ],
      ),
    );
  }
}

// 自定义ItemTextField组件
class ItemTextField extends StatelessWidget {
  final TextEditingController controller;
  final ThemeData themeData;

  const ItemTextField({super.key, required this.controller, required this.themeData});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: TextField(
        controller: controller,
        decoration: InputDecoration(hintText: "第${controller.hashCode}组输入"),
        style: themeData.textTheme.bodyLarge,
      ),
    );
  }
}

// 示例Repository类
class GroupRepository {
  static final GroupRepository instance = GroupRepository._();
  GroupRepository._();

  List<String> _savedData = [];

  void save(List<String> data) {
    _savedData = data;
    // 这里可扩展为本地存储（如SharedPreferences）或网络请求
  }

  List<String> getSavedData() {
    return _savedData;
  }
}

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