Flutter/Dart: 在脚手架上使用 extendBody: true 时如何提高 FAB 的位置？

Question

我为我的 Flutter 应用程序创建了一个底部应用栏，它有一个带缺口的浮动操作按钮。我注意到底部应用栏在按钮后面显示了一个白色背景，所以我在我的脚手架上使用了代码 extendBody: true 以便在应用栏后面扩展脚手架。

效果很好，但是，在我的一个屏幕上，我在屏幕右侧有另一个浮动操作按钮，由于 FAB 连接到脚手架底部，该按钮现在被底部操作栏隐藏了。我一直在寻找提高 FAB 按钮位置的解决方案，我发现的所有建议都说将 FAB 的位置提高一定的双倍值。因为我希望我的应用程序在多个屏幕上工作，所以我希望高度考虑 BottomAppBar 的高度，这样按钮看起来就像锁定到应用程序栏而不是脚手架。

有人知道怎么做吗？提前感谢您的帮助。

目前，我的代码如下所示：

 floatingActionButton: Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () => null,
            ),
          ),

上面的代码在我使用的其中一台设备上看起来不错，但在稍小的屏幕上，它把按钮抬得太高了。

Answer 1

而不是 EdgeInsets.only(bottom: 50.0) 将您的代码更改为以下内容：

floatingActionButton: Padding(
            padding: const EdgeInsets.only(bottom: EdgeInsets.only(
              bottom: MediaQuery.of(context).viewInsets.bottom + 70),
            child: FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: () => null,
            ),
          ),

遗憾的是，由于 FAB 与底部导航栏分离，因此无法直接引用底部导航栏。通过使用媒体查询，您至少可以设置填充以考虑屏幕底部。这提高了在脚手架小部件上使用 extendBody: true 时 FAB 的响应能力。

希望对您有所帮助。

Flutter/Dart: 在脚手架上使用 extendBody: true 时如何提高 FAB 的位置？

Flutter/Dart: How do I raise the location of a FAB when using extendBody: true on a Scaffold?

dart

floating-action-button

flutter