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

和输出：