Flutter：将图标与中间-底部导航栏对齐

Question

我的flutter应用程序中有一个底部导航栏。如何将图标对准中间。当前，它似乎是顶部对齐

Widget _bottomNavigationBar(int selectedIndex) {
    return BottomNavigationBar(
      backgroundColor: Palette.YELLOW,
      onTap: (int index) {
        setState(() {
          userModel.selectedIndex = index;
        });
      },
      currentIndex: userModel.selectedIndex,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Image.asset(
            "assets/images/search_nav_icon.png",

          ),
          title: Text(''),
        ),
        BottomNavigationBarItem(
            icon: Image.asset(
              "assets/images/fav_nav_icon.png",

            ),
      ],
    );
  }

Answer 1

当使用图标而不显示文本时，这对我有用。

返回BottomNavigationBar（ showSelectedLabels：否， showUnselectedLabel：否， // ... ）;

Answer 2

一个简单的解决方案是-用Column包裹BottomNavigationBar小部件。 并设置mainAxisAlignment: MainAxisAlignment.center

return Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget> [
    BottomNavigationBar(...)
  ]
);

一定有更好的方法可以做到这一点，但是我发现这项技术非常有用。

Answer 3

用Container包裹每个图标，并将其alignment属性设置为Alignment.center。

现在用Container小部件包装每个Expanded，并在Row小部件的帮助下将它们水平分组。

 Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget> [
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),),
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),),
    Expanded(child: Container(alignment:Alignment.center,child: Icon([...]),),)
  ]
)

您可以根据需要增加/减少Expanded小部件的数量，但是请确保不要在Expanded小部件上包装任何其他单子小部件

Answer 4

简单的解决方案位于 BottomNavigationBar 中，使用以下属性：

 showSelectedLabels: false,
 showUnselectedLabels: true,