Flutter - 如何为BottomNavigationBar添加分隔符？

Question

我在我的Flutter应用中使用BottomNavigationBar。这是现有的视图：

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

这是可能的吗？有没有简单的方法来实现这个？

- FetFrumos

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')
                ],
              ),
            )
          ]
        ),
        )
      ),

而输出为：

- Darshan