[英]Add text widget on BottomNavigationBarItem icon
我想显示一个小文本小部件,其中包含一个数字,该数字表示用户在底部 NavigationBarItem 的右下方收到的消息数。 因此,如果用户没有新消息,则文本不会出现,例如,如果他有 3 条新消息,则消息图标上会出现一个包含“3”的小圆圈小部件。
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(
Icons.message,
),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_box),
title: Text('Profile'),
),
],
currentIndex: 1,
onTap: (_onItemTapped),
)
您可以放置任何小部件,而不是图标。 我放了一个带有两个图标的常规堆栈,它工作正常:
BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Stack(
children: <Widget>[
Icon(Icons.message),
Positioned(
top: 0.0,
right: 0.0,
child: Icon(
Icons.brightness_1,
size: 8.0,
color: Colors.redAccent,
),
),
],
),
title: Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_box),
title: Text('Profile'),
),
],
currentIndex: 1,
),
使用此代码。 愿你的问题得到解决。 在 v1.19.0 之后,标题被替换为 label。 所以用这个。
BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), label: "home"),
BottomNavigationBarItem(icon: Icon(Icons.search), label: "explore"),
BottomNavigationBarItem(
icon: Icon(Icons.notifications), label: "notification"),
],
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.