Question

我正在努力为BottomNavigationBar设置背景色和所选项目的颜色。

这是我的小部件：

Widget BottomMenu(selectedIndex, onItemTapped) {
  return BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(backgroundColor: Colors.indigo, icon: Icon(Icons.search), title: Text('Search')),
      BottomNavigationBarItem(
          icon: Icon(Icons.location_searching), title: Text('Settings')),
      BottomNavigationBarItem(
          icon: Icon(Icons.message), title: Text('Messages')),
    ],
    currentIndex: selectedIndex,
    fixedColor: Colors.redAccent,
    onTap: onItemTapped,
  );
}

但是这不起作用。我得到的只是带有红色字体和图标的白色背景。我希望整个导航栏为靛蓝色。

有人吗？

Answer 1

用于背景色。您可以使用主题小部件来包装BottomNavigationBar。并在ThemeDate中设置canvasColor。这是您想要的代码。

bottomNavigationBar: Theme(
        data: ThemeData(
          canvasColor: Colors.lightBlue
        ),
        child: BottomNavigationBar(

        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              backgroundColor: Colors.indigo,
              icon: Icon(Icons.search),
              title: Text('Search')),
          BottomNavigationBarItem(
              icon: Icon(Icons.location_searching), title: Text('Settings')),
          BottomNavigationBarItem(
              icon: Icon(Icons.message), title: Text('Messages')),
        ],
        fixedColor: Colors.redAccent,
      ),
      ),

如何为BottomNavigationBar设置背景色

1 个答案: