Flutter中如何仅更新AppBar图标状态而不调用notifyListeners

方案1：使用ValueNotifier单独托管角标数值（无需全局notifyListeners） #

该方案完全不需要调用notifyListeners()，不会触发其他监听Cart的组件重建，自然不会清空你需要保留的列表。

第一步：修改Cart类代码 #

把原来int类型的_number替换为ValueNotifier<int>，同时暴露只读的监听入口：

// 替换原有_number定义
ValueNotifier<int> _numberNotifier = ValueNotifier(0);
// 对外暴露只读监听入口，避免外部随意修改值
ValueListenable<int> get numberNotifier => _numberNotifier;
// 保留原有getter兼容旧逻辑
int get number => _numberNotifier.value;

// 修改setBadge方法
void setBadge(int newNumber) {
  _numberNotifier.value = newNumber;
  // 无需调用notifyListeners()
}

第二步：修改AppBarWidget代码 #

用ValueListenableBuilder仅监听角标数值的变化，只更新角标部分UI：

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 仅获取Cart实例，不监听全局变化
    final cart = Provider.of<Cart>(context, listen: false);
    return ValueListenableBuilder<int>(
      valueListenable: cart.numberNotifier,
      child: IconButton(
        icon: Icon(Icons.shopping_bag_outlined),
        onPressed: () async {
          Navigator.of(context).pushNamed(ROUTE_CART);
        },
      ),
      builder: (_, currentNumber, child) {
        return BagBadge(
          child: child,
          value: currentNumber == 0 ? '' : currentNumber.toString(),
        );
      },
    );
  }
}

方案2：排查全局notifyListeners清空列表的根因 #

正常场景下notifyListeners()只会触发组件重建，不会主动清空数据，你遇到的列表清空问题大概率是因为监听Cart的列表组件在build方法中写了重置列表的逻辑（比如每次build都重新初始化列表、重复发起无缓存的接口请求）。修复这部分问题后，也可以用Selector精准监听number字段实现局部更新：

class AppBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Selector<Cart, int>(
      // 仅监听number字段变化，其他Cart属性变化不会触发重建
      selector: (_, cart) => cart.number,
      child: IconButton(
        icon: Icon(Icons.shopping_bag_outlined),
        onPressed: () async {
          Navigator.of(context).pushNamed(ROUTE_CART);
        },
      ),
      builder: (_, currentNumber, child) {
        return BagBadge(
          child: child,
          value: currentNumber == 0 ? '' : currentNumber.toString(),
        );
      },
    );
  }
}

之前调用setState不生效的原因 #

你的AppBarWidget是Stateless组件本身没有setState能力，就算改为Stateful组件，如果你没有获取到更新后的number值，setState也只会重绘旧数据，所以不会生效。

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