Question

我想显示一个小的文本小部件，该小部件包含一个数字，该数字表示用户在Bottom 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),
      )

Answer 1

您可以放置任何小部件来代替图标。我把一个带有两个图标的常规堆栈放在那里效果很好：

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,
  ),

Answer 2

使用此代码。愿你的问题得到解决。 v1.19.0 之后 title 被标签替换了。所以用这个。

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"),
    ],
  ),

在BottomNavigationBarItem图标上添加文本小部件

2 个答案: