如何更改BottomNavigationBar的背景颜色？

Question

我正在制作一个带有选项卡的简单应用程序。我需要将底部导航栏的背景颜色更改为蓝色。其余部分应该是白色背景，导航栏应该是蓝色背景。我该怎么做？

在ThemeData中设置canvasColor并没有起作用。

这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState(){
    return MyAppState();
}
}

class MyAppState extends State<MyApp>{

  int _selectedPage = 0;
  final _pageOptions = [
    Text('Item1'),
    Text('Item2'),
    Text('Item3')
  ];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'sddsd',

      theme: ThemeData(
        primaryColor: Colors.blueAccent,
        fontFamily: "Google Sans"

      ),

      home: Scaffold(
        appBar: AppBar(
            title:Text("LQ2018"),
            backgroundColor: Colors.blueAccent,
        ),

      body: _pageOptions[_selectedPage],

      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.blueAccent,
        currentIndex: _selectedPage,
        onTap: (int index){
          setState(() {
            _selectedPage= index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players')),
          BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending')),
          BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'))
        ]
      ),
      ),
    );
  }
}

- Suvin Nimnaka Sukka

Answer 1

试一下这个

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState(){
    return MyAppState();
  }
}

class MyAppState extends State<MyApp>{

  int _selectedPage = 0;
  final _pageOptions = [
    Text('Item1'),
    Text('Item2'),
    Text('Item3')
  ];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'sddsd',

      theme: ThemeData(
          primaryColor: Colors.blueAccent,
          fontFamily: "Google Sans"

      ),

      home: Scaffold(
        appBar: AppBar(
          title:Text("LQ2018"),
          //backgroundColor: Colors.blueAccent,
        ),

        body: _pageOptions[_selectedPage],

        bottomNavigationBar: BottomNavigationBar(

            //fixedColor: Colors.blueAccent,
            type: BottomNavigationBarType.shifting,

            currentIndex: _selectedPage,
            onTap: (int index){
              setState(() {
                _selectedPage= index;
              });
            },
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.blueAccent),
              BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
              BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.blueAccent)
            ]
        ),
      ),
    );
  }
}

- Saed Nabil

---

是的！运行得非常好。谢谢。 - Suvin Nimnaka Sukka

我知道它回答了问题，但我不明白为什么BottomNavigationBar也有一个backgroundColor属性呢？ 我猜它有一个被项目遮挡的背景？如果是这样，为什么将backgroundColor添加到单个项目会改变所有项目的颜色呢？从阅读文档（https://api.flutter.dev/flutter/material/BottomNavigationBar/backgroundColor.html）来看，这与“shifting”有关，但我仍然不太理解... - Thiemo

你好，@Thiemo。这是一个实现设计决策。可能是材料设计的要求，但不确定！如果你熟悉Flutter源代码并认为它值得，可以随意进行调整并将PR发送到GitHub存储库。 - Saed Nabil

Answer 2

将您的BottomNavigationBar包含在一个主题中，并在该主题的数据中设置canvasColor。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Theme(
          data: Theme.of(context).copyWith(
              canvasColor: Colors.blue,
              textTheme: Theme.of(context)
                  .textTheme
                  .copyWith(caption: TextStyle(color: Colors.black54))),
          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            currentIndex: currentIndex,
            fixedColor: Colors.green,
            onTap: (value) {},
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.add),),
            ],
          )),
    );
  }

- Berchmans

---

谢谢，我发现添加“type: BottomNavigationBarType.shifting”属性，然后为Tabitems设置背景颜色很容易 :) - Suvin Nimnaka Sukka