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
相关产品推荐
相关产品推荐

