4

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

我已经尝试过这里提供的不同小部件和解决方案，但BottomNavigationBarItem只接受icon: Icon(..)，没有别的。例如，如果我使用 puticon: 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(..)。

4

1 回答 1

9

我尝试重现该问题，但在更改了一些内容后它确实有效。首先，该icon属性接受 a Widget，因此不仅接受 a 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'),
          ),
        ],
      ),
    );
于 2019-06-05T12:44:57.617 回答