如何使bottomNavigationBar缺口透明

Question

我想像 android material 中 Inset FAB 中的设计解释那样制作缺口边距间距（space 在 FAB 的侧面和底部栏之间），它看起来像在这个小的可见圆形部分缩放背景文本。我们怎样才能让缺口 space 透明，以便看到它后面的文字？ 但是，我的底栏不是那样显示的

我的实现

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.white,
    child: Image.asset("images/paw.png"),
    onPressed: () {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => Map()));
    },
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    child: new Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.menu),
          color: Colors.transparent,
          onPressed: () {},
        ),
      ],
    ),
    color: Utiles.primary_bg_color,
  ),
  body: Container(...)

Answer 1

您需要 extendBody: true 在 Scaffold

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,
        ),
      ),
    );
  }
}

---

Answer 2

使用，extendBody: true

来自docs,

extendBody: true ensures that that scaffold's body will be visible through the bottom navigation bar's notch

Answer 3

底部应用栏 + 底部导航栏

问题标题询问 BottomNavigationBar 所以我添加这个答案是为了帮助同时使用 BottomAppBar 和 a BottomNavigationBar 的人.

如果您不使用BottomNavigationBar，请忽略此。

导航栏覆盖缺口

默认情况下，在 BottomAppBar 中用作 child 的 BottomNavigationBar 将像这样覆盖缺口：

我们需要移除它的颜色和阴影，让刘海显示出来。

在BottomAppBar

中使用BottomNavigationBar

为了保持刘海可见...

BottomNavigationBar 需要：

• a backgroundColor 指定，0 alpha（完全透明）
  • 否则使用默认的onBackground主题色，覆盖刘海
• elevation: 0 去除 BottomNavigationBar 下的丑陋阴影
  • 透明 backgroundColor 使阴影可见且可怕

BottomAppBar 需要：

• shape: CircularNotchedRectangle() 显然，要为 FAB
留一个档次
• elevation: 0 去除缺口 FAB 下的轻微阴影（几乎不可见）

Scaffold 需要：

• extendBody: true 允许 body 内容在缺口 FAB
下方流动

SafeArea 需要：

• 如果使用 SafeArea，请使用 bottom:false arg，因此我们的 body 可以在 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 ******************
        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')
          ],
        ),
      ),
    );

结果

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

Answer 4

做：

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

之后

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

在“不添加背景颜色”之后

  BottomNavigationBar(
      //backgroundColor: