Flutter BottomNavigationBarItem 只接受 Icon 而没有其他小部件？

Question

在我们的 Flutter Cupertino 项目中，我们需要在底部栏图标之一上显示一个徽章。确切地说，购物车中有多少商品。

我尝试了此处提供的不同小部件和解决方案，但 BottomNavigationBarItem 仅接受 icon: Icon(..) 并没有其他内容。例如，如果我输入icon: Stack(..) 而不是icon: Icon(..)，则会显示错误消息，例如 “无效的常量值...”

这里是一些示例代码：

class CupertinoStoreHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            title: Text('Kühlschrank'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            title: Text('Konto'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.shopping_cart),
            title: Text('Warenkorb'),
          ),
        ],
      ),

所以如果我不能放任何东西来代替Icon(..)。没有其他小部件，没有Stack(..)。

为什么？如何放置其他小部件，例如 Badge(..):

badges: ^1.0.2
import 'package:badges/badges.dart';

这个问题与可能的重复问题不同，因为我已经尝试过那里发布的解决方案，但仍然无法使用 Stack(..)，而只能使用 Icon(..)。

Answer 1

我尝试重现该问题，但在更改了一些内容后它确实有效。首先icon 属性接受Widget，因此不仅仅是Icon，所以这不是问题。

我确实注意到，在 items: const <BottomNavigationBarItem>[ 中，您应该删除 const 关键字，因为它不是必需的，也不是恒定的。

最后，您需要向CupertinoTabScaffold 添加一个标签生成器，这基本上会返回底部导航栏上方显示的内容。

您的最终代码如下所示：

return CupertinoTabScaffold(
      tabBuilder: (BuildContext context, int i) {
        return CupertinoActivityIndicator();
      },
      tabBar: CupertinoTabBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Badge(
              badgeContent: Text('3'),
              child: Icon(Icons.settings),
            ),
            title: Text('Kühlschrank'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.profile_circled),
            title: Text('Konto'),
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.shopping_cart),
            title: Text('Warenkorb'),
          ),
        ],
      ),
    );