如何更改底部导航栏的颜色？答案

【问题标题】：How can I change the colour of a bottomNavigationBar?如何更改底部导航栏的颜色？
【发布时间】：2018-06-14 09:27:12
【问题描述】：

如何更改bottomNavigationBar 的颜色？

下面是我的代码的 sn-p。我无法更改小部件的颜色。

@override
  Widget build(BuildContext context) {
    return BottomNavigationBar(

      currentIndex: currentIndex,
      onTap: (selectedPosition) => onNavItemTapped(selectedPosition),
      items: <BottomNavigationBarItem>[
        widget.buildBottomNavigationBarItem(
            context, 'Discover', Icons.home, false, 0),
        widget.buildBottomNavigationBarItem(
            context, 'Chats', Icons.chat, true, 1),
      ],
    );
  }

【问题讨论】：

标签： flutter

【解决方案1】：

请这样使用：

bottomNavigationBar: new Theme(
        data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
          canvasColor: Colors.red,
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          ..........

【讨论】：

这应该是公认的答案，因为它适用于最新版本的 Flutter SDK

【解决方案2】：

使用 Theme 调用包裹底部栏，您可以在其中使用 canvasColor 和 primaryColor 修补 Theme 数据。

Theme(
   data: Theme.of(context).copyWith(
     // background
     canvasColor: Colors.red, 
     // active item foreground
     primaryColor: Colors.white  
     // inactive items foreground
     textTheme: TextTheme(caption: TextStyle(color: Colors.black45)) 
   ),
   child: BottomNavigationBar()
)

【讨论】：

【解决方案3】：

您可以像这样设置BottomNavigationBarItem 的backgroundColor：

return new BottomNavigationBar(
    items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              icon: new Icon(Icons.library_books, size: 22.0),
              title: new Text("Text", style: new TextStyle(fontSize: 11.0)),
              backgroundColor: Colors.pink,
            ),
     ],
 );

【讨论】：

【解决方案4】：

将您的 BottomNavigationBar 包装在 Material 小部件中并提供颜色属性为

Material(
        color: Colors.blue,
        child:BottomNavigationBar(),
);

【讨论】：

【解决方案5】：

导航栏的背景颜色是默认的 Material 背景颜色，所以只需将 BottomNavigationBar 包裹在 Material Widget 中

return Material(
color : Colors.red,
child:new BottomNavigationBar(

      currentIndex: currentIndex,
      onTap: (selectedPosition) => onNavItemTapped(selectedPosition),
      items: <BottomNavigationBarItem>[
        widget.buildBottomNavigationBarItem(
            context, 'Discover', Icons.home, false, 0),
        widget.buildBottomNavigationBarItem(
            context, 'Chats', Icons.chat, true, 1),
      ],
    ));

【讨论】：

仍然没有改变bar的背景颜色
这对任何细节都没有帮助？

【解决方案6】：

bottomNavigationBar 有一个名为 backgroundColor 的字段。设置此字段会更改颜色。

bottomNavigationBar: BottomNavigationBar(

        backgroundColor: Colors.black,

【讨论】：

虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。

【解决方案7】：

如果您想在应用中随处更改 BottomNavigationBar 的颜色，请尝试更改主小部件中的画布颜色，如下所示：

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      //here 
      canvasColor: Color(0xff1A535C),
    ),
    home: HomePageOrAnyThingElseAsYouWant(),
  );
}
}

【讨论】：

【解决方案8】：

我知道这个问题很老，很容易解决，

但我将演示如何帮助其他人开发新的 Flutter SDK。让我们举个例子来说明我们正在采取的措施 =>

BottomNavigationBar(
      backgroundColor: Colors.red,
      items: [
        BottomNavigationBarItem(
             backgroundColor: Colors.green,
             label: text,
             icon: AnimatedContainer(
                      duration: Duration(
                         milliseconds: AppAnimationDuration.MEDIUM_ANIMATION_DURATION,
                     ),
              width: isSelected ? AppIconSize.size23 : AppIconSize.size20,
              height: isSelected ? AppIconSize.size23 : AppIconSize.size20,
              child: Container(
                      child: SvgPicture.asset(
                                iconPath,
                                 color: Colors.amber,
          ),
        ),
      ),
    )
),

BottomNavigationBar中的第一个属性是backgroundColor，

这个属性负责BottomNavigationBar小部件的整个颜色。

因此它将以填充方式为小部件的整个背景着色。

BottomNavigationBarItem Widget中的Second属性也是backgroundColor，负责BottomNavigationBar中单个item的背景色。

我希望这会帮助一些人。

【讨论】：