Flutter分数录入表单问题：TextField Controller无法保存不同分数求方案

针对分数录入表单中每个TextField需要保存不同分数的需求，最直接的解决方式是为每个输入框分配独立的TextEditingController，避免复用同一个控制器导致内容同步的问题。以下分两种场景给出具体实现：

场景1：固定数量的科目输入 #

如果你的表单是固定几科（比如语文、数学、英语），直接为每个科目创建单独的控制器即可：

import 'package:flutter/material.dart';

class ScoreInputForm extends StatefulWidget {
  const ScoreInputForm({super.key});

  @override
  State<ScoreInputForm> createState() => _ScoreInputFormState();
}

class _ScoreInputFormState extends State<ScoreInputForm> {
  // 为每个科目创建独立控制器
  final TextEditingController _chineseController = TextEditingController();
  final TextEditingController _mathController = TextEditingController();
  final TextEditingController _englishController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('分数录入')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _chineseController,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(labelText: '语文分数'),
            ),
            TextField(
              controller: _mathController,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(labelText: '数学分数'),
            ),
            TextField(
              controller: _englishController,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(labelText: '英语分数'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveScores,
              child: const Text('保存分数'),
            ),
          ],
        ),
      ),
    );
  }

  // 保存分数逻辑
  void _saveScores() {
    // 解析输入内容为数字，同时做非空校验
    final double? chinese = double.tryParse(_chineseController.text.trim());
    final double? math = double.tryParse(_mathController.text.trim());
    final double? english = double.tryParse(_englishController.text.trim());

    if (chinese != null && math != null && english != null) {
      // 这里可以将分数保存到变量、数据库或提交到后端
      print('保存成功：语文=$chinese，数学=$math，英语=$english');
    } else {
      // 提示用户输入有效的数字
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请输入有效的分数')),
      );
    }
  }

  // 页面销毁时释放控制器，避免内存泄漏
  @override
  void dispose() {
    _chineseController.dispose();
    _mathController.dispose();
    _englishController.dispose();
    super.dispose();
  }
}

场景2：动态生成的科目输入 #

如果需要支持动态添加/删除科目，用列表来管理控制器集合：

import 'package:flutter/material.dart';

class DynamicScoreInput extends StatefulWidget {
  const DynamicScoreInput({super.key});

  @override
  State<DynamicScoreInput> createState() => _DynamicScoreInputState();
}

class _DynamicScoreInputState extends State<DynamicScoreInput> {
  List<String> _subjects = ['语文', '数学'];
  List<TextEditingController> _scoreControllers = [];

  @override
  void initState() {
    super.initState();
    // 初始化控制器列表
    _scoreControllers = List.generate(_subjects.length, (_) => TextEditingController());
  }

  // 添加新科目
  void _addSubject() {
    setState(() {
      _subjects.add('新科目${_subjects.length + 1}');
      _scoreControllers.add(TextEditingController());
    });
  }

  // 删除指定科目
  void _removeSubject(int index) {
    setState(() {
      _scoreControllers[index].dispose(); // 删除前先释放控制器
      _scoreControllers.removeAt(index);
      _subjects.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('动态分数录入')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 动态生成输入框
            for (int i = 0; i < _subjects.length; i++)
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _scoreControllers[i],
                      keyboardType: TextInputType.numberWithOptions(decimal: true),
                      decoration: InputDecoration(labelText: '${_subjects[i]}分数'),
                    ),
                  ),
                  IconButton(
                    icon: const Icon(Icons.delete),
                    onPressed: () => _removeSubject(i),
                  ),
                ],
              ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _addSubject,
              child: const Text('添加科目'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _saveAllScores,
              child: const Text('保存所有分数'),
            ),
          ],
        ),
      ),
    );
  }

  void _saveAllScores() {
    Map<String, double?> scoreMap = {};
    bool hasInvalidInput = false;

    for (int i = 0; i < _subjects.length; i++) {
      final score = double.tryParse(_scoreControllers[i].text.trim());
      scoreMap[_subjects[i]] = score;
      if (score == null) hasInvalidInput = true;
    }

    if (hasInvalidInput) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('存在无效分数，请检查输入')),
      );
    } else {
      print('保存成功：$scoreMap');
      // 执行保存逻辑
    }
  }

  @override
  void dispose() {
    // 释放所有控制器
    for (var controller in _scoreControllers) {
      controller.dispose();
    }
    super.dispose();
  }
}

常见问题排查 #

如果之前用Controller没生效，大概率是以下原因：

• 复用了同一个TextEditingController到多个TextField，导致输入内容同步
• 忘记将Controller绑定到TextField的controller参数
• 没有在页面销毁时调用dispose()释放控制器，导致状态异常

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