Home Articles

Flutter中的Style BottomNavigationBar

Asked
Viewed 643 times
8

我正在尝试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(),
    );
  }
}

2 Answers

  • 32

    尝试将 BottomNavigationBar 包裹在 Container 中,然后设置 color .

    例:

    @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: null,
          body: pages(),
          bottomNavigationBar:new Container(
            color: Colors.green,
            child: 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,
            ),
          );
        );
      };
    
  • -1

    没有选项可以指定 BottomNavigationBar 的背景颜色,但可以更改 canvasColor . 在不弄乱整个应用程序的情况下,您可以实现它的一种方法是将 BottomNavigationBar 包装在 Theme 中,并且需要 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"),
            )
          ],
        ),
      ),
    

    希望有所帮助!

Related