SafeArea 與 MediaQuery

本頁討論如何以及何時使用 SafeArea 和 MediaQuery 小部件。

在最新的裝置上執行您的應用程式時，您可能會遇到 UI 的部分被裝置螢幕上的切口遮擋。您可以使用 SafeArea 小部件來解決這個問題，它會內嵌其子小部件以避免侵入（如凹槽和相機切口），以及作業系統 UI（例如 Android 上的狀態列），或是實體顯示器的圓角。

如果您不想要此行為，SafeArea 小部件允許您停用其四個邊的任何一邊的邊距。預設情況下，所有四個邊都啟用。

通常建議將 Scaffold 小部件的主體包裹在 SafeArea 中作為一個好的開始，但您不總是需要將它放在 Widget 樹的這麼高的位置。

例如，如果您有意讓您的應用程式延伸到切口下方，您可以移動 SafeArea 來包裹任何有意義的內容，並讓應用程式的其餘部分佔用整個螢幕。

使用 SafeArea 可確保您的應用程式內容不會被實體顯示器功能或作業系統 UI 切斷，並讓您的應用程式即使在新裝置具有不同形狀和樣式的切口進入市場時也能成功。

SafeArea 如何在少量程式碼中完成這麼多？在幕後，它使用 MediaQuery 物件。

如 SafeArea 區段中所討論，MediaQuery 是一個用於建立自適應應用程式的強大小部件。有時您會直接使用 MediaQuery，有時您會使用 SafeArea，而 SafeArea 在幕後使用 MediaQuery。

MediaQuery 提供大量資訊，包括應用程式目前的視窗大小。它公開輔助功能設定，如高對比模式和文字縮放，或使用者是否正在使用輔助功能服務，如 TalkBack 或 VoiceOver。MediaQuery 還包含有關您裝置顯示器功能（如具有鉸鏈或摺疊）的資訊。

SafeArea 使用 MediaQuery 的資料來計算其子 Widget 內嵌多少。具體而言，它使用 MediaQuery 的邊距屬性，這基本上是顯示器被系統 UI、顯示器凹槽或狀態列部分遮擋的量。

那麼，為什麼不直接使用 MediaQuery？

答案是 SafeArea 做了一件聰明的事，使得它比僅使用原始的 MediaQueryData 更具優勢。具體來說，它修改了暴露給 SafeArea 子項的 MediaQuery，使其看起來好像添加到 SafeArea 的邊距不存在。這表示您可以巢狀使用 SafeArea，而只有最上面的 SafeArea 會應用避免凹槽和系統 UI 所需的邊距。

隨著您的應用程式的成長，以及您移動小部件時，您不必擔心在有多個 SafeArea 的情況下應用過多的邊距，而如果您直接使用 MediaQueryData.padding 則會遇到問題。

您 *可以* 將 Scaffold 小部件的主體包裹在 SafeArea 中，但您 *不必* 將它放在小部件樹的這麼高的位置。 SafeArea 只需要包裹如果被前面提到的硬體功能切斷會導致資訊遺失的內容。

例如，如果您有意讓您的應用程式延伸到切口下方，您可以移動 SafeArea 來包裹任何有意義的內容，並讓應用程式的其餘部分佔用整個螢幕。附帶一提，這也是 AppBar 小部件預設執行的操作，這就是它如何位於系統狀態列下方的原因。這也是為什麼建議將 Scaffold 的主體包裹在 SafeArea 中，而不是包裹整個 Scaffold 本身的原因。

SafeArea 確保您的應用程式內容不會以一般方式被切斷，並讓您的應用程式即使在新裝置具有不同形狀和樣式的切口進入市場時也能成功。

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-05-13。 檢視原始碼 或 回報問題。