Flutter已挂载Widget中如何更新购物车数量TextField控制器状态？

嘿，我刚梳理了你的问题——这其实是Scoped Model状态更新时，已挂载Widget没有正确响应状态变化的典型场景。问题出在：你的ItemRow里的TextField控制器是在Widget初始化时设置的，之后没有和购物车模型的变化绑定，所以删除商品/清空购物车时，控制器的值没跟着更新，只有重新创建ItemRow（切换分类返回）时才会重新读取模型的最新值。

下面是具体的解决思路和代码示例：

1. 确保ItemRow能收到模型更新通知 #

首先，你的ItemRow需要能感知购物车模型的变化。如果还没做，把ItemRow用ScopedModelDescendant（或Scoped Model的Consumer组件）包裹，这样当模型调用notifyListeners()时，ItemRow会收到更新信号。

2. 同步控制器与模型状态 #

你有两种可靠的方式让控制器跟着模型走：

方式一：在build方法中动态更新控制器 #

每次ItemRow构建时，检查当前商品的购物车数量和控制器的当前值是否一致，不一致就更新：

class ItemRow extends StatelessWidget {
  final Item item;
  final TextEditingController _controller = TextEditingController();

  ItemRow({required this.item});

  @override
  Widget build(BuildContext context) {
    final cartModel = ScopedModel.of<CartModel>(context);
    final currentCount = cartModel.getCartItemCount(item.id);

    // 如果控制器值和模型中的数量不一致，更新控制器
    if (_controller.text != currentCount.toString()) {
      _controller.text = currentCount.toString();
    }

    return ListTile(
      title: TextField(controller: _controller),
      // 其他UI部件
    );
  }
}

这种方式简单直接，适合不需要太复杂逻辑的场景。

方式二：通过模型监听器主动更新控制器 #

如果不想每次build都检查，可以在ItemRow的生命周期里订阅模型变化，手动更新控制器：

class ItemRow extends StatefulWidget {
  final Item item;

  const ItemRow({required this.item});

  @override
  State<ItemRow> createState() => _ItemRowState();
}

class _ItemRowState extends State<ItemRow> {
  late TextEditingController _controller;
  CartModel? _cartModel;

  @override
  void initState() {
    super.initState();
    _controller = TextEditingController();
    // 获取模型，设置rebuildOnChange: false避免不必要的Widget重建
    _cartModel = ScopedModel.of<CartModel>(context, rebuildOnChange: false);
    // 添加监听器，模型变化时更新控制器
    _cartModel!.addListener(_updateControllerValue);
    // 初始化控制器值
    _updateControllerValue();
  }

  void _updateControllerValue() {
    final count = _cartModel!.getCartItemCount(widget.item.id);
    if (_controller.text != count.toString()) {
      _controller.text = count.toString();
    }
  }

  @override
  void dispose() {
    // 移除监听器，避免内存泄漏
    _cartModel?.removeListener(_updateControllerValue);
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: TextField(controller: _controller),
      // 其他UI部件
    );
  }
}

这种方式更高效，因为只有模型变化时才会更新控制器，不会在每次build都做检查。

3. 关键：确保模型状态变化时触发通知 #

最后别忘了检查你的CartModel，在删除商品或清空购物车的方法里，必须调用notifyListeners()，否则所有依赖模型的Widget都不会收到更新信号：

class CartModel extends Model {
  Map<String, int> _cartItems = {};

  int getCartItemCount(String itemId) {
    return _cartItems[itemId] ?? 0;
  }

  void removeItem(String itemId) {
    _cartItems.remove(itemId);
    // 必须调用这个方法通知Widget更新
    notifyListeners();
  }

  void clearCart() {
    _cartItems.clear();
    notifyListeners();
  }
}

这样调整后，不管是删除单个商品还是清空购物车，已挂载的ItemRow的TextField控制器都会同步更新为0，不需要切换分类再返回啦。

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