BottomAppBar浮动操作按钮凹槽/插入不透明

Question

我在一个材料App中添加了一个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()),
        );
        },
    ),
)

这是我渲染后得到的：

缺口不透明，其背后的内容被隐藏起来。

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

Answer 1

你只需要在颤振频道：master然后添加到Scaffold：

Scaffold(
   extendBody: true
);

它应该是透明的:)

电贺

钢筋

Answer 2

问题是，如果你把你的内容放在body的Scaffold，它将不会与你的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()),
                    );*/
                    },
                  ),
                ),
              ],
            );