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'),
          ),
        ],
      ),
    );