flutter - 颤动：计数器未在底部导航栏上完整显示

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 中的 Icon 给出了整个容器的大小。您可以删除定位偏移量，而不是向图标添加填充。

这是代码：

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: '채팅',)