Flutter/Dart：如何在腳手架上使用 extendBody: true 時提升 FAB 的位置？

Question

我為我的 Flutter 應用程序創建了一個底部應用程序欄，該應用程序具有一個帶缺口的浮動操作按鈕。 我注意到底部的應用欄在按鈕后面顯示了一個白色背景，所以我在我的 Scaffold 上使用了代碼extendBody: true來擴展應用欄后面的 Scaffold。

這很好用，但是，在我的一個屏幕上，我在屏幕右側有另一個浮動操作按鈕，由於 FAB 連接到 Scaffold 的底部，該按鈕現在被底部操作欄隱藏。 我一直在尋找一種解決方案來提高 FAB 按鈕的位置，我發現的所有建議都說將 FAB 的位置提高某個雙倍值。 由於我希望我的應用程序可以在多個屏幕上工作，因此我希望高度考慮 BottomAppBar 的高度，以便看起來按鈕被鎖定到應用程序欄而不是 Scaffold。

有誰知道如何做到這一點？ 提前謝謝你的幫助。

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

 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 與底部導航欄分開，因此無法直接引用底部導航欄。 通過使用媒體查詢，您至少可以設置填充以考慮屏幕底部。 當在 Scaffold 小部件上使用extendBody: true時，這提高了 FAB 的響應能力。

希望這可以幫助。