你如何强制 Flutter BottomNavigationBar 在所有 TABS 上具有相同的宽度？

Question

这是我的代码，但我还没有找到如何强制所有项目在网络上具有相同的宽度。主要问题是，在颤振中，这个小部件分配宽度并为所选选项卡分配更大的空间，但出于设计目的，我需要强制所有项目具有相同的空间量。

\n\n

额外的疑问，我选择的选项卡没有更改其颜色，即使它已配置为这样做

\n\n

BottomNavigationBar(\n            showUnselectedLabels: true,\n            backgroundColor: Color(0xff22273d).withOpacity(.4),\n            selectedItemColor: Color(0xffffd156),\n            selectedIconTheme: IconThemeData(\n              color: Color(0xffffd156),\n            ),\n            selectedLabelStyle: GoogleFonts.openSans(color: Color(0xffffd156)),\n            currentIndex: _currentIndex,\n            onTap: (int index) {\n              setState(() {\n\n                _currentIndex = index;\n                print("Current index"+_currentIndex.toString());\n              });\n            },\n            items: [\n              BottomNavigationBarItem(\n                  icon: Icon(Icons.home, color: Color(0xff99ffffff),),\n                  backgroundColor: Color(0xff22273d).withOpacity(.9),\n                  title: Text("Home", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)\n              ),\n              BottomNavigationBarItem(\n                  icon: ImageIcon(AssetImage("images/soccer_24_px.png"), color: Colors.white,),\n                  backgroundColor: Color(0xff22273d).withOpacity(.9),\n                  title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)\n              ),\n              BottomNavigationBarItem(\n                  icon: Icon(Icons.calendar_today, color: Color(0xff99ffffff),),\n                  backgroundColor: Color(0xff22273d).withOpacity(.9),\n                  title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)\n              ),\n              BottomNavigationBarItem(\n                  icon: ImageIcon(AssetImage("images/classification_24_px.png"), color: Color(0xff99ffffff),),\n                  backgroundColor: Color(0xff22273d).withOpacity(.9),\n                  title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Colors.white),)\n              ),\n              BottomNavigationBarItem(\n                  icon: Icon(Icons.more_horiz, color: Color(0xff99ffffff),),\n                  backgroundColor: Color(0xff22273d).withOpacity(.9),\n                  title: Text("M\xc3\xa1s", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)\n              ),\n            ]\n          )```\n

\n

Answer 1

回答宽度。尝试在BottomNavigationBar中添加

type: BottomNavigationBarType.fixed,

这应该使所有宽度相同......但我没有在网络上尝试过，所以让我知道它是否有效。

对您额外疑问的回答是您已使用 Icon 和 AssetImages 颜色覆盖了选定的颜色。删除所有 BottomNavigationBarItem 中的图标和资源图像中的所有颜色属性并设置

unselectedItemColor: Color(0xff99ffffff),

在 BottomNavigationBar 中，它应该可以工作。还要确保您的 _currentIndex 位于状态类上方，如下所示

...
int _currentIndex = 0;

class _YourScreenState extends State<YourScreen> {
@override
...

最后认为当 BottomNavigationBarType 设置为固定时，BottomNavigationBarItem 中的背景颜色不起作用，因此您也可以将它们全部删除

输出