Question

我已经坚持了一段时间，还没有从谷歌搜索中找到任何答案。我有一个带有endDocked Fab的bottomAppBar，其中有3个隔开的图标。但是，这些图标没有考虑到FAB就在其上方，这会导致间距不理想。

第一张照片显示了当前发生的事情，第二张照片更接近了我所要拍摄的照片，减去了隐藏在FAB后面的白色图标。

有没有办法告诉Flutter说图标的可用空间不应与endDocked FAB重叠？

谢谢！

代码：

    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    floatingActionButton: FloatingActionButton(
      backgroundColor: Color(0xFF14172D),
      child: const Icon(Icons.menu),
      onPressed: () {},
    ),
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.all_inclusive),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.account_circle),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.notifications),
            color: Color(0xFF14172D),
            onPressed: () {},
          ),
        ],
      ),
    ),

Answer 1

您可以使用非可视窗口小部件来增加BottomAppBar。在Flutter中，通常将SizedBox用于填充，所以可以做到这一点：

bottomNavigationBar: BottomAppBar(
  ...
  child: new Row(
    ...
    children: <Widget>[
      ...
     ,
    ],
  ),const SizedBox(width: 20.0)
...

Flutter：带有endDocked FAB的BottomAppBar图标不能很好地对齐。

1 个答案: