You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter TextEditingController无法正常工作,无法获取4个TextField内容提交API

你代码的核心问题是4个TextField共用了同一个TextEditingController实例,同一个控制器绑定多个输入框时,只会同步最后一个输入框的内容,你提交的四个字段自然全是同一个值,功能肯定无法正常运行。

解决步骤:

  • 给每个TextField分别创建独立的TextEditingController,对应商品编码、商品名称、商品单位、商品数量四个字段
  • 页面销毁时手动销毁所有控制器,避免内存泄漏
  • 提交数据时分别从对应控制器中取对应字段的文本即可

修正后的完整代码:

class _AddItemPageState extends State<AddItemPage> {
  // 每个输入框对应独立的控制器
  final codeController = TextEditingController();
  final nameController = TextEditingController();
  final unitController = TextEditingController();
  final quantityController = TextEditingController();

  // 页面销毁时释放控制器,避免内存泄漏
  @override
  void dispose() {
    codeController.dispose();
    nameController.dispose();
    unitController.dispose();
    quantityController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: const Text("Add Item",
              style: TextStyle(
                  color: Colors.white,
                  fontFamily: "Quicksand",
                  fontWeight: FontWeight.bold)),
          centerTitle: true,
          backgroundColor: Colors.green,
        ),
        body: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                TextField(
                  controller: codeController,
                  decoration: const InputDecoration(hintText: "请输入商品编码"),
                  style: TextStyle(fontFamily: "Quicksand", fontSize: 18),
                ),
                const SizedBox(
                  height: 8,
                ),
                TextField(
                  controller: nameController,
                  decoration: const InputDecoration(hintText: "请输入商品名称"),
                  style: TextStyle(fontFamily: "Quicksand", fontSize: 18),
                ),
                const SizedBox(
                  height: 8,
                ),
                TextField(
                  controller: unitController,
                  decoration: const InputDecoration(hintText: "请输入商品单位"),
                  style: TextStyle(fontFamily: "Quicksand", fontSize: 18),
                ),
                const SizedBox(
                  height: 8,
                ),
                TextField(
                  controller: quantityController,
                  decoration: const InputDecoration(hintText: "请输入商品数量"),
                  // 限制只能输入数字,减少后续校验成本
                  keyboardType: TextInputType.number,
                  style: TextStyle(fontFamily: "Quicksand", fontSize: 18),
                ),
                const SizedBox(
                  height: 8,
                ),

                ElevatedButton.icon(
                    onPressed: () async {
                      final Map<String, String> data = ({
                        'code': codeController.text,
                        'name': nameController.text,
                        'unit': unitController.text,
                        'quantity': quantityController.text,
                      });
                      // 此处调用API传入data即可
                    },
                    icon: Icon(Icons.add),
                    style: ButtonStyle(
                        padding: MaterialStateProperty.all(
                            EdgeInsets.fromLTRB(0, 16, 0, 16)),
                        backgroundColor:
                        MaterialStateProperty.all<Color>(Colors.green)),
                    label: Text(
                      "Add Item",
                      style: TextStyle(fontFamily: "Quicksand", fontSize: 16),
                    ))
              ],
            ),
          ),
        ));
  }
}

补充提示:如果接口要求商品数量为数字类型,提交时可以用int.parse(quantityController.text)把字符串转成数字即可,转换前可以先做非空、格式校验避免报错。

内容的提问来源于stack exchange,提问作者Rajesh Abdullah

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.01 00:48:02