颤动：计数器未在底部导航栏上以完整圆圈显示

如何解决颤动：计数器未在底部导航栏上以完整圆圈显示

我想用底部导航栏的聊天图标在堆栈最右侧和最顶部以完整圆圈显示红色计数器，但我只得到了这个；

这是我的代码；

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

如何在堆栈中最右侧和最远顶部以完整圆圈显示红色计数器？

解决方法

只需添加 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: '채팅'),

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

,

Stack 内的 Icon 给出了整个容器的大小。 您可以删除定位偏移，然后向图标添加填充。

代码如下：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val displayMetrics: DisplayMetrics = applicationContext.resources.displayMetrics
    val pxWidth = displayMetrics.widthPixels

    val baseLayout = findViewById<LinearLayout>(R.id.baseLayout)

    baseLayout.doOnLayout {
        val textViewOne = findViewById<TextView>(R.id.textVieOne)
        val oneWidth = textViewOne.width

        val textViewTwo = findViewById<TextView>(R.id.textViewTwo)
        val twoWidth = textViewTwo.width

        val textViewThree = findViewById<TextView>(R.id.textViewThree)
        val threeWidth = textViewThree.width

        val sumOfChildWidths = oneWidth + twoWidth + threeWidth
        
        if(pxWidth <= sumOfChildWidths){
            textViewThree.isVisible = false
        }
    }
}