Question

我正在关注Github中的this线程来解决我的问题，但没有解决。

当我在BottomNavBar中添加FloatinActionButton时，我试图在Scaffold上显示一些边距，但是FAB只是重叠并且没有出现边距。

我想要的东西：

我所拥有的：

代码：

Scaffold(
        extendBody: true,
        resizeToAvoidBottomInset: true,
        body: _children[_currentIndex],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.search),
          backgroundColor: Colors.blue,
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.orange,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.movie),
                tooltip: "Text",
              ),
              IconButton(
                icon: Icon(Icons.person),
                tooltip: "Text",
              )
            ],
          ),
        ))

请注意，我确实同时尝试了BottomAppBar和BottomNavigationBar。有效的方法是使用Stack，但是自this video神奇地实现这一点以来，我一直在寻找一种更优雅的方法。我有最新版本的Flutter。

注意：忽略颜色和图标，只需要查看我不是在做什么/我做错了。

Answer 1

您可以将BottomAppBarTheme应用于您的应用主题，并为其设置形状：

return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      // This is the theme of your application.
      //
      // Try running your application with "flutter run". You'll see the
      // application has a blue toolbar. Then, without quitting the app, try
      // changing the primarySwatch below to Colors.green and then invoke
      // "hot reload" (press "r" in the console where you ran "flutter run",
      // or simply save your changes to "hot reload" in a Flutter IDE).
      // Notice that the counter didn't reset back to zero; the application
      // is not restarted.
      primarySwatch: Colors.blue,
      bottomAppBarTheme: BottomAppBarTheme(
        shape: CircularNotchedRectangle(),
      ),
    ),
    home: MyHomePage(),
);

编辑：扩展了代码段以明确说明在何处添加BottomAppBarTheme

Answer 2

BottomAppBar类具有两个感兴趣的属性：shape和notchedMargin（See flutter docs for all properties）

您可以使用“ shape”属性来指示钢筋环绕FAB。如果您想在FAB周围使用其他间距，则“ notchedMargin”属性会加倍并定义边距。

如果不想更改默认值，则无需指定边距。

尝试：

Scaffold(
    extendBody: true,
    resizeToAvoidBottomInset: true,
    body: _children[_currentIndex],
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      onPressed: () {},
      child: Icon(Icons.search),
      backgroundColor: Colors.blue,
    ),
    bottomNavigationBar: BottomAppBar(
      color: Colors.orange,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.movie),
            tooltip: "Text",
          ),
          IconButton(
            icon: Icon(Icons.person),
            tooltip: "Text",
          )
        ],
      ),
      shape: CircularNotchedRectangle(),
    ))

Example screenshot of above shape property

添加FAB时未显示颤振底部导航边距

2 个答案: