在我们的 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(..)。
最佳答案
我尝试重现该问题,但在更改了一些内容后它确实有效。首先是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 只接受 Icon 而没有其他小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56460230/