Flutter 中的底部导航栏样式 [英] Style BottomNavigationBar in Flutter

问题描述

我正在尝试 Flutter 并且我正在尝试更改应用程序上 BottomNavigationBar 的颜色，但我所能实现的只是更改 BottomNavigationItem 的颜色(图标和文字).

I am trying out Flutter and I am trying to change the colour of the BottomNavigationBar on the app but all I could achieve was change the colour of the BottomNavigationItem (icon and text).

这里是我声明我的 BottomNavigationBar 的地方:

Here is where i declare my 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 编辑为绿色来解决这个问题，但它弄乱了整个应用程序的配色方案:

Earlier I thought I had it figured out by editing canvasColor to green on my main app theme but it messed up the entire app colour scheme:

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 的 Theme 中.

There is no option to specify the background color of BottomNavigationBar but to change the canvasColor. One way you can achieve it without messing up the whole app would be by wrapping BottomNavigationBar in a Theme with desired 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 中的底部导航栏样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！