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

问题描述 投票:1回答:1

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

非常怀疑,即使已配置,我选择的选项卡也不会更改其颜色

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)),)
              ),
            ]
          )```
android flutter dart flutter-layout flutter-dependencies
1个回答
0
投票

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

type: BottomNavigationBarType.fixed,

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

让您进一步怀疑的是,您已经用Icon和AssetImages颜色覆盖了所选颜色。删除图标和资产图像中位于BottomNavigationBarItem中的所有颜色属性,它应该可以正常工作

输出enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.