Flutter-如何在BottomNavigationBar上添加分隔符？

Question

我在Flutter应用中使用了BottomNavigationBar。这是存在视图：

但是我需要在项目之间添加分隔符。像这样：

有可能吗？有一个简单的方法可以实现吗？

Answer 1

使用BottomAppBar作为子项，可以Container作为子项来指定应用程序栏的自定义height，然后可以使Row来添加子项。 Row可以有3个FlatButtons，每个Icon内有一个Text和Column。在每个FlatButton之间，您可以添加Container以添加分隔符。下面是代码片段：

bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 60,
          child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            FlatButton(
              padding: EdgeInsets.all(10.0),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  Icon(Icons.home),
                  Text('Home')
                ],
              ),
            ),
            Container(color: Colors.black, width: 2,),
            FlatButton(
              padding: EdgeInsets.all(10.0),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  Icon(Icons.business),
                  Text('Business')
                ],
              ),
            ),
            Container(color: Colors.black, width: 2,),
            FlatButton(
              padding: EdgeInsets.all(10.0),
              onPressed: () {},
              child: Column(
                children: <Widget>[
                  Icon(Icons.school),
                  Text('School')
                ],
              ),
            )
          ]
        ),
        )
      ),

输出：