我正在尝试Flutter,我正在尝试更改应用程序中BottomNavigationBar的颜色,但我所能实现的只是更改BottomNavigationItem(图标和文本)的颜色.
这是我声明我的BottomNavigationBar的地方：
class _BottomNavigationState extends State<BottomNavigationHolder>{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: null,body: pages(),bottomNavigationBar:new BottomNavigationBar(
items: <BottomNavigationBarItem>[
new BottomNavigationBarItem(
icon: const Icon(Icons.home),title: new Text("Home")
),new BottomNavigationBarItem(
icon: const Icon(Icons.work),title: new Text("Self Help")
),new BottomNavigationBarItem(
icon: const Icon(Icons.face),title: new Text("Profile")
)
],currentIndex: index,onTap: (int i){setState((){index = i;});},fixedColor: Colors.white,),);
}
之前我以为我通过在我的主应用主题上将canvasColor编辑为绿色来解决它,但它搞砸了整个应用程序配色方案：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',theme: new ThemeData(
primarySwatch: Colors.blue,canvasColor: Colors.green
),home: new FirstScreen(),);
}
}
解决方法
没有选项可以指定BottomNavigationBar的背景颜色,但可以更改canvasColor.在不弄乱整个应用程序的情况下,您可以实现它的一种方法是将BottomNavigationBar包装在具有所需canvasColor的主题中.
例：
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.green,// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.red,textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))),// sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,currentIndex: 0,items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.add),title: new Text("Add"),new BottomNavigationBarItem(
icon: new Icon(Icons.delete),title: new Text("Delete"),)
],
希望有所帮助！
