Flutter中的样式BottomNavigationBar

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试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在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"),
        )
      ],
    ),
  ),

希望有帮助！

以上是 Flutter中的样式BottomNavigationBar 的全部内容， 来源链接： utcz.com/qa/408064.html

回到顶部