在Flutter中如何创建一个有凹槽的底部导航栏

本指南将演示如何在底部导航应用栏中添加一个有凹槽的浮动操作按钮。底部导航栏的凹槽浮动操作按钮增强了你的应用程序的用户界面的美感。

带有浮动操作按钮(FloatingActionButton)的 BottomAppBar 可以通过以下代码添加到你的应用程序中。

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );

代码的输出如下所示，当你运行它时，你的应用程序将有一个底部 appbar 和一个随时可用的 FloatingActionButton。

首先，使用Scaffold小组件的 floatingActionButtonLocation 属性来定位 FloatingActionButton 按钮。我们将使用如下所示的 centerDocked 来定位它在中心位置：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

如下图所示，将该形状应用于 BottomAppBar。

shape: const CircularNotchedRectangle()

指定 extendBody: true 可以确保通过底部导航栏的缺口可以看到脚手架的主体。

extendBody: true,

就是这样。

全部代码：

return Scaffold(
      extendBody: true,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        shape: const CircularNotchedRectangle(),
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(

              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),

    );

谢谢！