时间戳

首页 > 解决方案 > Flutter/Dart：如何在脚手架上使用 extendBody: true 时提升 FAB 的位置？

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

问题描述

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

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

有谁知道如何做到这一点？提前谢谢你的帮助。

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

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

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

标签： flutterdartfloating-action-button

解决方案

而不是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当在 Scaffold 小部件上使用时，这提高了 FAB 的响应能力。

希望这可以帮助。

推荐阅读