Question

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

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

以下是一些示例代码：

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

Flutter BottomNavigationBarItem仅接受图标，不接受其他小部件？

1 个答案: