BottomAppBar 浮动操作按钮缺口/插图不透明答案

【问题标题】：BottomAppBar Floating action button notch/inset is not transparentBottomAppBar 浮动操作按钮缺口/插图不透明
【发布时间】：2019-03-06 15:36:47
【问题描述】：

我在 materialApp 中添加了一个BottomAppBar 来脚手架，并且我在中心添加了一个带有插图的晶圆厂。代码看起来有点像这样

Scaffold(
    bottomNavigationBar: BottomAppBar(
        color: Theme.of(context).accentColor,
        shape: CircularNotchedRectangle(),
        child: _buildBottomBar(context),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
        backgroundColor: Theme.of(context).primaryColor,
        child: Center(
        child: Icon(
            Icons.add,
            size: 32.0,
        ),
        ),
        onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => CreateEvent()),
        );
        },
    ),
)

这就是我在渲染后得到的：

缺口不透明，后面的内容被隐藏了。

有没有办法解决这个问题？我可能错过了什么？

【问题讨论】：

您的“内容落后”是否指定为Scaffold 的body 参数？
是的，body 包含所有内容，基本上是图像和文本的列表视图。
我建议改为提出问题。这似乎是一个布局问题，身体没有在底部栏后面。
哦，太糟糕了。以为我做错了什么。
@RémiRousselet 原来有一个未解决的问题 -> github.com/flutter/flutter/issues/17555

标签： flutter

【解决方案1】：

问题是如果您将内容放在Scaffold 的body 中，它不会与AppBar、BottomAppBar 的大小重叠。

您可以尝试使用Stack，将您的身体作为第一个孩子，然后将Scaffold，将backgroundColor 更改为透明。

        @override
          Widget build(BuildContext context) {
            return Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Image.network(
                      "https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&h=350"),
                ),
                Scaffold(
                  backgroundColor: Colors.transparent,
                  bottomNavigationBar: BottomAppBar(
                    color: Theme.of(context).accentColor,
                    shape: CircularNotchedRectangle(),
                    child: Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.access_alarm),
                          onPressed: () => null,
                        ),
                        IconButton(
                          icon: Icon(Icons.sms_failed),
                          onPressed: () => null,
                        ),
                      ],
                    ),
                  ),
                  floatingActionButtonLocation:
                      FloatingActionButtonLocation.centerDocked,
                  floatingActionButton: FloatingActionButton(
                    backgroundColor: Theme.of(context).primaryColor,
                    child: Center(
                      child: Icon(
                        Icons.add,
                        size: 32.0,
                      ),
                    ),
                    onPressed: () {
                      /*
                    Navigator.push(
                        context,
                        MaterialPageRoute(builder: (context) => CreateEvent()),
                    );*/
                    },
                  ),
                ),
              ],
            );

【讨论】：

我不推荐这种方式，但我只是想知道为什么会这样
是的，所以我尝试了这个，这需要实际主体手动设置主题，滚动成为问题。我现在可能会坚持使用原版，并希望找到解决方案。这是已经打开的 Github 问题：github.com/flutter/flutter/issues/17555

【解决方案2】：

你只需要在flutter频道：master，然后添加到Scaffold：

Scaffold(
   extendBody: true
);

它应该是透明的:)

问候

钢筋

更新：

您无需在主频道上。它无处不在:)

【讨论】：

是的，等待它交给主人，因为人们不想在主人身上发货。我的应用程序已经在生产中，所以需要一个稳定的颤振构建。不过，它已经在 master 中使用了很长一段时间了，所以希望下一个版本有这个。

【解决方案3】：

我还可以通过将 resizeToAvoidBottomInset 标志设置为 false 来实现所需的行为。

@override
Widget build(BuildContext context) {

    return Scaffold(
        extendBody: true,
        resizeToAvoidBottomInset: false,
        body: IndexedStack(
            children: <Widget>[],
            index: _selectedTab,
        ),
        bottomNavigationBar: ClipRRect(
            clipBehavior: Clip.antiAlias,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16.0),
                topRight: Radius.circular(16.0)
            ),
            child: BottomNavigationBar(
                backgroundColor: Colors.white,
                elevation: 10,
                type: BottomNavigationBarType.fixed,
                items: <BottomNavigationBarItem>[],
                currentIndex: _selectedTab,
            ),
        ),
    );
}

编辑：请记住，您可能必须使用 MediaQuery.of(context)

手动设置底部插图

【讨论】：

【解决方案4】：

添加到已接受的解决方案中，如果您使用 SafeArea 作为 Scaffold 的直系子级，请确保将底部属性设置为 false。

Scaffold(
  extendBody: true,
  ...
  child: SafeArea(
    bottom: false,   /* important */
    child: Container(
      child: // your app content
    ),
  ),
);

这使得内容可以在BottomNavigationBar后面流动

【讨论】：