Flutter购物车提交后商品数量异常及输入框不更新问题

问题根源分析 #

1. 所有商品数量统一为最后一个值：父组件大概率使用了单个全局变量存储数量，而非给每个商品对象单独维护quantity属性，导致更新时所有商品都引用同一个值。
2. 手动输入数量不生效：输入框的onChanged回调未正确将输入值同步到对应商品的quantity，或父组件更新状态时未精准定位目标商品。

分步修复代码 #

1. 重构商品数据模型 #

给每个商品添加独立的数量属性：

class CartItem {
  final String id;
  final String name;
  int quantity; // 每个商品单独维护数量

  CartItem({required this.id, required this.name, this.quantity = 1});
}

2. 修改子组件Procart #

子组件接收单个商品对象，回调传递商品ID+新数量，确保父组件能精准更新目标商品：

class Procart extends StatefulWidget {
  final CartItem item;
  final Function(String itemId, int newQuantity) onQuantityChanged;

  const Procart({super.key, required this.item, required this.onQuantityChanged});

  @override
  State<Procart> createState() => _ProcartState();
}

class _ProcartState extends State<Procart> {
  late TextEditingController _quantityController;

  @override
  void initState() {
    super.initState();
    _quantityController = TextEditingController(text: widget.item.quantity.toString());
  }

  @override
  void didUpdateWidget(covariant Procart oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 父组件更新商品数量时同步输入框内容
    if (oldWidget.item.quantity != widget.item.quantity) {
      _quantityController.text = widget.item.quantity.toString();
    }
  }

  @override
  void dispose() {
    _quantityController.dispose();
    super.dispose();
  }

  void _updateQuantity(int delta) {
    final newQuantity = widget.item.quantity + delta;
    if (newQuantity >= 1) { // 防止数量小于1
      widget.onQuantityChanged(widget.item.id, newQuantity);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          icon: const Icon(Icons.remove),
          onPressed: () => _updateQuantity(-1),
        ),
        SizedBox(
          width: 50,
          child: TextField(
            controller: _quantityController,
            keyboardType: TextInputType.number,
            onChanged: (value) {
              final int? newQty = int.tryParse(value);
              if (newQty != null && newQty >= 1) {
                widget.onQuantityChanged(widget.item.id, newQty);
              }
            },
            textAlign: TextAlign.center,
          ),
        ),
        IconButton(
          icon: const Icon(Icons.add),
          onPressed: () => _updateQuantity(1),
        ),
        Text(widget.item.name),
      ],
    );
  }
}

3. 修改父组件Cart #

父组件维护商品列表，收到回调时通过ID定位并更新对应商品的数量：

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

  @override
  State<Cart> createState() => _CartState();
}

class _CartState extends State<Cart> {
  List<CartItem> _cartItems = [
    CartItem(id: '1', name: '苹果', quantity: 1),
    CartItem(id: '2', name: '芒果', quantity: 2),
    CartItem(id: '3', name: '橙子', quantity: 6),
  ];

  void _handleQuantityChanged(String itemId, int newQuantity) {
    setState(() {
      final index = _cartItems.indexWhere((item) => item.id == itemId);
      if (index != -1) {
        // 替换原商品对象触发状态更新
        _cartItems[index] = CartItem(
          id: _cartItems[index].id,
          name: _cartItems[index].name,
          quantity: newQuantity,
        );
      }
    });
  }

  void _submitOrder() {
    // 生成订单收据，此时每个商品数量均为独立正确值
    print('订单详情：');
    for (var item in _cartItems) {
      print('${item.name}: ${item.quantity}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('购物车')),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _cartItems.length,
              itemBuilder: (context, index) {
                return Procart(
                  item: _cartItems[index],
                  onQuantityChanged: _handleQuantityChanged,
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: _submitOrder,
            child: const Text('提交订单'),
          ),
        ],
      ),
    );
  }
}

关键修复点 #

• 每个商品独立维护quantity属性，彻底避免全局变量导致的批量同步错误
• 子组件回调传递商品ID，父组件精准定位更新目标
• 输入框通过didUpdateWidget监听父组件状态，确保内容同步
• 手动输入时添加合法性校验，过滤无效值

内容的提问来源于stack exchange，提问作者ItsHarsh.json