我正在尝试Flutter,并且尝试更改BottomNavigationBar应用程序上的颜色,但是我能做的就是更改BottomNavigationItem(图标和文本)的颜色。
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在主应用程序主题上将其编辑为绿色来解决这个问题,但它弄乱了整个应用程序的配色方案:
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在Theme所需的中canvasColor。
Theme
例:
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"), ) ], ), ),
希望有帮助!