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

Question

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

额外的怀疑，我选择的选项卡没有改变它的颜色，即使它被配置为这样做

BottomNavigationBar(
            showUnselectedLabels: true,
            backgroundColor: Color(0xff22273d).withOpacity(.4),
            selectedItemColor: Color(0xffffd156),
            selectedIconTheme: IconThemeData(
              color: Color(0xffffd156),
            ),
            selectedLabelStyle: GoogleFonts.openSans(color: Color(0xffffd156)),
            currentIndex: _currentIndex,
            onTap: (int index) {
              setState(() {

                _currentIndex = index;
                print("Current index"+_currentIndex.toString());
              });
            },
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Home", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/soccer_24_px.png"), color: Colors.white,),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.calendar_today, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
              BottomNavigationBarItem(
                  icon: ImageIcon(AssetImage("images/classification_24_px.png"), color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Colors.white),)
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz, color: Color(0xff99ffffff),),
                  backgroundColor: Color(0xff22273d).withOpacity(.9),
                  title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),)
              ),
            ]
          )```

Answer 1

回答宽度。尝试在 BottomNavigationBar

中添加

type: BottomNavigationBarType.fixed,

这应该使所有宽度都相同...虽然我没有在网络上尝试过，但请告诉我它是否有效。

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

unselectedItemColor: Color(0xff99ffffff),

在 BottomNavigationBar 中，它应该可以工作。还要确保你的 _currentIndex 位于状态 class 之上，像这样

...
int _currentIndex = 0;

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

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

输出

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

Do you how to force Flutter BottomNavigationBar to have same width on all the TABS?

android

dart

flutter

flutter-dependencies

flutter-layout