飞镖 – Flutter中的Style BottomNavigationBar

概述我正在尝试Flutter,我正在尝试更改应用程序中BottomNavigationBar的颜色,但我所能实现的只是更改BottomNavigationItem(图标和文本)的颜色. 这是我声明我的BottomNavigationBar的地方： class _BottomNavigationState extends State<BottomNavigationHolder>{ @overri 我正在尝试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"),)      ],

希望有所帮助！

总结

以上是内存溢出为你收集整理的飞镖 – Flutter中的Style BottomNavigationBar全部内容，希望文章能够帮你解决飞镖 – Flutter中的Style BottomNavigationBar所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。