Flutter 2 BottomNavigationBar 不显示第二项的标签答案

【问题标题】：Flutter 2 BottomNavigationBar does not show labels from the second itemFlutter 2 BottomNavigationBar 不显示第二项的标签
【发布时间】：2021-06-26 02:09:33
【问题描述】：

您好，我是 Flutter 2 的新手，有一个关于 BottomNavigationBar 的问题。这是我正在测试的代码

class BottomNavigationComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'AL',
              backgroundColor: Colors.red),
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'BL',
              backgroundColor: Colors.green),
          BottomNavigationBarItem(
              icon: Icon(Icons.ac_unit_rounded),
              label: 'CL',
              backgroundColor: Colors.yellow),
          BottomNavigationBarItem(
              icon: Icon(Icons.access_alarm_sharp),
              label: 'DL',
              backgroundColor: Colors.orange),
    ]);
  }
}

然后我得到以下屏幕

如果我删除任何一个BottomNavigationBarItem，那么该栏将变为跟随。可以看到背景色不再设置了。

有人可以帮忙吗？谢谢

更新：

根据@Ali Mahdiyar 的建议，我得到以下屏幕。它变得更好并显示标签。但是，背景颜色似乎不起作用。

【问题讨论】：

标签： flutter

【解决方案1】：

试试这个

更新/////

class BottomNavigationComponent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return BottomNavigationBar(
type: BottomNavigationBarType.fixed,////////////this added

unselectedItemColor: Colors.black54,///////you can add this to set the items colors 
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'AL',
                  backgroundColor: Colors.red),
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'BL',
                  backgroundColor: Colors.green),
              BottomNavigationBarItem(
                  icon: Icon(Icons.ac_unit_rounded),
                  label: 'CL',
                  backgroundColor: Colors.yellow),
              BottomNavigationBarItem(
                  icon: Icon(Icons.access_alarm_sharp),
                  label: 'DL',
                  backgroundColor: Colors.orange),
        ]);
      }
    }

你也可以在底部导航条中设置图标的颜色

BottomNavigationBarItem(
                  icon: Icon(Icons.access_alarm_sharp,color:Colors.black),
                  label: 'DL',
                  backgroundColor: Colors.orange),

【讨论】：

嗨@Ali Mahdiyar，谢谢你的建议。我试过了，标签显示出来了。但是，背景颜色似乎不起作用。我尝试为每个项目设置不同的背景颜色，但现在都是白色。
你也放个图片来解析背景色
您的意思是我可以使用图像而不是使用背景颜色吗？嗯....听起来不错，但有点奇怪
哦，对不起，我错过了理解它。请参阅我帖子末尾的更新部分
您是指底部导航栏的背景颜色还是项目背景颜色？