在Scaffold中需要extendBody: true

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      appBar: AppBar(),
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Text('text text text text text text text text text text text text text text text text text text text text ');
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 12,
        color: Colors.blue,
        child: Container(
          height: 60,
        ),
      ),
    );
  }
}

底部应用程序栏+底部导航栏

问题标题询问有关BottomNavigationBar的问题，因此我添加此答案以帮助同时使用BottomAppBar * 和 * BottomNavigationBar的用户。
如果您***不***使用BottomNavigationBar，请忽略此内容。

导航栏盖凹槽

默认情况下，BottomNavigationBar用作BottomAppBar内部的子节点，将覆盖缺口，如下所示：

我们需要删除它的颜色和阴影，让缺口显示。

在BottomAppBar中使用BottomNavigationBar

为了保持切口可见...
BottomNavigationBar需要：

• 指定了backgroundColor，alpha为0（完全透明）
• 否则，使用默认的onBackground主题颜色，覆盖缺口
• elevation: 0以删除BottomNavigationBar下的丑陋阴影
• 透明的backgroundColor使阴影可见&可怕

BottomAppBar需要：

• shape: CircularNotchedRectangle()显然，要有一个用于FAB的缺口
• elevation: 0，用于去除带缺口的FAB下方的轻微阴影（几乎不可见）

Scaffold需要：

• extendBody: true，允许主体内容物在带凹槽的FAB下方流动

SafeArea需要：

• 如果使用SafeArea，请使用bottom:false参数，以便我们的主体可以向下流过FAB下方的BottomNavigationBar

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      extendBody: true, // CRITICAL for body flowing under FAB
      body: SafeArea(
        child: Center(
          child: Container(
            color: Colors.greenAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),
        bottom: false,
        // ↑ SafeArea(bottom:false) allows Scaffold body:+extendBody: to hit bottom edge
      ),
      // ↓ Location: centerDocked positions notched FAB in center of BottomAppBar ↓
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar( // ****** APP BAR ******************
        clipBehavior: Clip.antiAlias,
        shape: CircularNotchedRectangle(), // ← carves notch for FAB in BottomAppBar
        color: Theme.of(context).primaryColor.withAlpha(255),
        // ↑ use .withAlpha(0) to debug/peek underneath ↑ BottomAppBar
        elevation: 0, // ← removes slight shadow under FAB, hardly noticeable
        // ↑ default elevation is 8. Peek it by setting color ↑ alpha to 0
        child: BottomNavigationBar( // ***** NAVBAR  *************************
          elevation: 0, // 0 removes ugly rectangular NavBar shadow
          // CRITICAL ↓ a solid color here destroys FAB notch. Use alpha 0!
          backgroundColor: Theme.of(context).primaryColor.withAlpha(0),
          // ====================== END OF INTERESTING STUFF =================
          selectedItemColor: Theme.of(context).colorScheme.onSurface,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.ac_unit_outlined,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_alarm,
                    size: 40,
                    color: Theme.of(context).colorScheme.onBackground),
                label: 'Edit')
          ],
        ),
      ),
    );

结果

完成上述部分后，您应该会看到如下所示的内容：

使用，extendBody: true
从docs开始，
extendBody：true确保通过底部导航栏的凹口可以看到支架主体

请执行以下操作：

return Scaffold( 
     extendBody: true,
    (...)

后

body: SafeArea(
         bottom: false,
    (...)

在“不添加背景色”之后

BottomNavigationBar(
      //backgroundColor:

如果你使用安全区域，那么扩展的主体和其他方法可能都不起作用。所以把安全区域设置为（false）。