Question

我正在使用BottomNavigationBarItem来显示带有图标和文本的底部导航UI。我希望能够在这些徽章上添加带数值的徽章。这是我目前的尝试：

  bottomNavigationBar:
      new BottomNavigationBar(items: <BottomNavigationBarItem>[
        new BottomNavigationBarItem(
        icon: new Stack(
          children: <Widget>[
            const Icon(Icons.home),
            new Positioned(
                top: 0.0,
                left: 0.0,
                child: new Container(
                  decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(4.0),
                      color: Colors.red),
                  width: 16.0,
                  child: new Text(
                    "12",
                    style: const TextStyle(color: Colors.white),
                  ),
                ))
          ],
        ),
        title: new Text("Home")),
        new BottomNavigationBarItem(
        icon: const Icon(Icons.star), title: new Text("Star")),
      ],
      type: BottomNavigationBarType.fixed),

但是，徽章的位置带有图标的边框，因此它与图标重叠：

相反，我想要的是：

是否可以使用BottomNavigationBarItem小部件实现此目的？如果没有，那么什么是一个好的解决方法？

Answer 1

确保徽章位置正确，溢出的孩子应该是可见的

icon: new Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                const Icon(Icons.home),
                new Positioned(
                    top: -1.0,
                    right: -6.0,
                    child: new Container(
                      decoration: new BoxDecoration(
                          borderRadius: new BorderRadius.circular(4.0), color: Colors.red),
                      width: 16.0,
                      child: new Text(
                        "12",
                        style: const TextStyle(color: Colors.white),
                      ),
                    ))
              ],
            ),

Answer 2

如果对任何人都有用，我可以制作一个可以在AppBar中使用的软件。

static Widget makeIconWithBadge(String badgeText, GestureTapCallback onTap) {
    return Container(
      padding: EdgeInsets.only(right: 16.0),
      child: Center(
        child: new Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            const Icon(Icons.inbox),
            new Positioned(
              top: -6.0,
              right: -6.0,
              child: Container(
                padding: EdgeInsets.all(2.0),
                decoration: new BoxDecoration(
                  borderRadius: new BorderRadius.circular(99.0),
                  color: Colors.white,
                ),
                child: new Container(
                  padding: EdgeInsets.symmetric(vertical: 1.0, horizontal: 4.0),
                  decoration: new BoxDecoration(
                      borderRadius: new BorderRadius.circular(99.0),
                      color: Colors.red),
                  child: Center(
                    child: new Text(
                      "12",
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white, fontSize: 12.0,),
                    ),
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: Material(
                borderRadius: BorderRadius.all(Radius.circular(99.0)),
                color: Colors.transparent,
                child: InkWell(onTap: onTap),
              ),
            )
          ],
        ),
      ),
    );
  }

如何将徽章绝对放在BottomNavigationBarItem中

2 个答案: