Flutter中如何动态更新导航栏Badge的计数？

问题描述 #

我的Flutter应用底部导航栏代码如下：

BottomNavigationBar(
  items: [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: appState.itemCard.cardItems.isNotEmpty   // 仅购物车有商品时显示徽章
          ? badges.Badge(                            // 购物车徽章组件
              badgeContent: Text(appState
                  .itemCard.cardItems.values
                  .reduce((a, b) => a + b)
                  .toString()),
              child: const Icon(Icons.shopping_cart),
            )
          : const Icon(Icons.shopping_cart),
      label: 'Card',
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.menu),
      label: 'Menu',
    ),
  ],
  currentIndex: selectedIndex,
  onTap: (value) {
    setState(() {
      selectedIndex = value;
    });
  },
)

当前问题：修改itemCard.cardItems（比如添加商品到购物车）时，徽章计数不会实时更新，只有切换到其他导航栏选项后才会刷新。需要实现添加商品时徽章计数立即更新。

解决方案（感谢@Abhishek Karad） #

步骤1：在ItemCard中添加ValueNotifier存储总商品数 #

用ValueNotifier监听数值变化，替代直接依赖cardItems的计算值：

class ItemCard {
  Map<Item, int> cardItems = {};
  double totalPrice = 0.0;
  ValueNotifier<int> totalItems = ValueNotifier<int>(0); // 用于监听总商品数变化
}

关键注意点：每次修改cardItems后，必须同步更新totalItems的值，示例如下：

// 示例：添加商品时同步更新总商品数
void addItem(Item item) {
  cardItems[item] = (cardItems[item] ?? 0) + 1;
  // 计算总商品数并更新ValueNotifier
  int total = cardItems.values.reduce((a, b) => a + b);
  totalItems.value = total;
}

步骤2：用ValueListenableBuilder包裹徽章组件 #

通过ValueListenableBuilder监听totalItems的变化，自动触发徽章刷新：

BottomNavigationBarItem(
  icon: ValueListenableBuilder(
      builder: (context, value, child) => badges.Badge(
            showBadge: value > 0,
            badgeContent: Text(value.toString()), // 直接使用builder传入的value更简洁
            child: const Icon(Icons.shopping_cart),
          ),
      valueListenable: appState.itemCard.totalItems),
  label: 'Card',
),

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