如何使bottomNavigationBar缺口透明

Question

我想让缺口边距（FAB 的两侧和底部栏之间的空间）像Inset FAB 中的android material design 解释，它在这个小的可见圆形部分看起来像一个缩放背景文本。我们如何使缺口空间透明以看到其背后的文字？但是，我的底部栏没有那样显示

我的实现

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

底部应用栏 + 底部导航栏

问题标题询问了BottomNavigationBar所以我添加了这个答案来帮助人们同时使用 aBottomAppBar 和a BottomNavigationBar。

如果您不使用BottomNavigationBar，请忽略这一点。

导航栏覆盖缺口

默认情况下，在 a 中BottomNavigationBar用作子项的 aBottomAppBar将像这样覆盖缺口：

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

使用BottomNavigationBar中BottomAppBar

为了保持缺口可见......

BottomNavigationBar 需要：

• 一个backgroundColor指定的，用0α（完全透明）
  • 否则，使用默认onBackground主题颜色，覆盖缺口
• elevation: 0 去除下面丑陋的阴影 BottomNavigationBar
  • 透明backgroundColor使阴影可见且可怕

BottomAppBar 需要：

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

Scaffold 需要：

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

SafeArea 需要：

• 如果使用SafeArea，请使用bottom:falsearg，这样我们的身体就可以BottomNavigationBar在 FAB下方流过, 下方

    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 3

用， extendBody: true

从文档中，

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