计数器未在底部导航栏上完整显示

Question

我想在堆栈的最右侧和最顶部的完整圆圈中显示带有 bottomNavigationBar 聊天图标的红色计数器，但我只得到这个；

这是我的代码；

 BottomNavigationBarItem(
                icon: Stack(children: [
                          Icon(Icons.chat),
                          Positioned(
                            top: -3,
                            right: -3,
                            child: Container(
                              width: 16,
                              height: 16,
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: Colors.red),
                              child: Center(
                                child: Text(
                                  '1'
                                  style: TextStyle(
                                      fontSize: 13,
                                      color: Colors.white,
                                ),
                              ),
                            ),
                          )
                        ]);
                     ),
                label: '채팅'),

如何在堆栈中最右边和最顶部显示完整的红色计数器？

Answer 1

只需添加 sizedbox 并重新定位您的 Positioned 小部件，如下所示：

BottomNavigationBarItem(
          icon: Stack(children: [
            SizedBox(height: 30, width: 40, child: Icon(Icons.chat)),
            Positioned(
                top: 0,
                right: -2,
                child: Container(
                  width: 20,
                  height: 16,
                  decoration: BoxDecoration(
                      shape: BoxShape.circle, color: Colors.red),
                  child: Center(
                    child: Text(
                      '1',
                      style: TextStyle(
                        fontSize: 13,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ))
          ]),
          label: '채팅'),

左边的是新编辑的图标，右边的是你的图标。干杯

Answer 2

Stack 内的图标为整个容器指定了大小。您可以删除 Positioned 偏移量，然后向图标添加填充。

代码如下：

BottomNavigationBarItem(
              icon: Stack(children: [
                Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Icon(Icons.chat),
                ),
                Positioned(
                    top: 0,
                    right: 0,
                    child: Container(
                      width: 16,
                      height: 16,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle, color: Colors.red),
                      child: Center(
                        child: Text(
                          '1',
                          style: TextStyle(
                            fontSize: 13,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ))
              ]),
            label: '채팅',)

计数器未在底部导航栏上完整显示

Counter not shown in full circle on bottomnavigationbar

counter

flutter