Question

我在materialApp的脚手架中添加了BottomAppBar，为此，我添加了一个以插图为中心的fab。代码看起来像这样

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的{{1}}中，则不会与Scaffold，AppBar的大小重叠。

您可以尝试使用BottomAppBar，将自己的身体作为第一个孩子，然后放置Stack，将Scaffold更改为“透明”。

backgroundColor

Answer 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）

手动设置底部插图。

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

3 个答案: