Flutter BottomAppBar自定义底部tab栏凸起

app中的底部tab栏通常用Scaffold.bottomNavigationBar的BottomNavigationBar和BottomNavigationBarItem配合来实现。但是如果像实现更复杂的效果，如底部tabbar中间凸出按钮效果，类似于咸鱼，就需要使用到BottomAppBar+FloatingActionButton来配合实现。Scaffold.bottomNavigationBar的值通常为BottomNavigationBar，也可以为BottomAppBar。

用法如下：

Scaffold(
    bottomNavigationBar: BottomAppBar(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.home),
          ),
          IconButton(
            icon: Icon(Icons.people),
          )
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

效果如下：


FloatingActionButton是悬浮在BottomAppBar上面，并没有嵌入里面，嵌入里面用法如下：

BottomAppBar(
    shape: CircularNotchedRectangle(),
    ...
)

增加BottomAppBar的形状，效果如下：


elevation参数为阴影值：

BottomAppBar(
    elevation: 8.0,
    ...
)

notchMargin参数表示缺口外边距：

BottomAppBar(
    notchMargin: 10,
    ...
)

效果如下：


改变FloatingActionButton的形状为足球场形状，切嵌入的形状随之变化，代码如下：

Scaffold(
    bottomNavigationBar: BottomAppBar(
      shape: AutomaticNotchedShape(
          RoundedRectangleBorder(), StadiumBorder(side: BorderSide())),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.home),
          ),
          IconButton(
            icon: Icon(Icons.people),
          )
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton.extended(
      onPressed: () {},
      icon: new Icon(Icons.add),
      label: const Text("label"),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

效果如下：


改为多边形：

Scaffold(
    bottomNavigationBar: BottomAppBar(
      shape: AutomaticNotchedShape(
          RoundedRectangleBorder(), BeveledRectangleBorder(borderRadius: BorderRadius.circular(10))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.home),
          ),
          IconButton(
            icon: Icon(Icons.people),
          )
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton.extended(
      onPressed: () {},
      shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(10)),
      icon: new Icon(Icons.add),
      label: const Text("label"),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

效果如下：


当然也可以改为棱形：

Scaffold(
    bottomNavigationBar: BottomAppBar(
      shape: AutomaticNotchedShape(
          RoundedRectangleBorder(), BeveledRectangleBorder(borderRadius: BorderRadius.circular(100))),
      ...
    floatingActionButton: FloatingActionButton.extended(
      onPressed: () {},
      shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(100)),
      icon: new Icon(Icons.add),
      label: const Text("label"),
    ),
    ...
)

效果如下：


我们可以通过此控件定义任何我们想要的效果。

更多参考：
    BottomNavigationBar底部导航栏详解、
    BottomAppBar底部应用栏和floatingActionButton实现中间凸起的底部导航


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！