如何更改底部导航项的背景颜色？答案

【问题标题】：How to change background color of bottomnavigationItem?如何更改底部导航项的背景颜色？
【发布时间】：2021-12-25 11:14:13
【问题描述】：

我尝试了以下代码，但它不起作用

BottomNavigationBarItem(
            icon: SvgPicture.asset("assets/icons/tinpay3.svg"),
            label: "TINPAY",
            backgroundColor: Color.fromRGBO(255, 194, 44, 1.0),
           )

我想改变这样的背景颜色。。 SO如何改变bottomnavigationItem的背景颜色？

【问题讨论】：

标签： flutter flutter-bottomnavigation

【解决方案1】：

BottomNavigationBar 有这些颜色参数：

fixedColor: ...,
backgroundColor: ...,
selectedItemColor: ...,
unselectedItemColor: ...,

而BottomNavigationBarItem 有：

backgroundColor: ...,

也许你应该使用它们？

更新

我认为你可以使用activeIcon 参数并将其设置为另一个图像：

BottomNavigationBarItem(
  icon: SvgPicture.asset("assets/icons/tinpay3.svg"),
  activeIcon: SvgPicture.asset("assets/icons/tinpay3_reversed.svg"),
  label: "TINPAY",
  backgroundColor: Color.fromRGBO(255, 194, 44, 1.0),
),

其中tinpay3_reversed.svg 是tinpay3.svg 的反面，带有白色字母和彩色背景。

【讨论】：

在我的例子中，你可以看到我使用了背景颜色，但它不起作用
您有 3 种不同的样式，而 BottomNavigationBar 仅支持两种：“选定”和“未选定”。 3号和4号有什么区别？
我尝试了所有样式，但它只会改变文本颜色。
您是否尝试将activeIcon 设置为另一个图像？
是的，我有，它看起来很糟糕，图像在中心，其余的都是白色的。它没有涵盖完整的底部导航项目