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

Question

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

我已经尝试了这里提供的不同的小部件和解决方案，但是 BottomNavigationBarItem 只接受 icon: Icon(..) 而没有其他。例如，如果我将 icon: Stack(..) 而不是 icon: Icon(..)，则会显示错误消息，例如 "Invalid const value..."

下面是一些示例代码：

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 添加一个选项卡构建器，这基本上是 returns 底部导航栏上方显示的内容。

您的最终代码如下所示：

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

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

Flutter BottomNavigationBarItem accepts only Icon and no other widgets?

flutter

flutter-cupertino