SafeArea 與 MediaQuery

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

在最新裝置上執行應用程式時，您可能會遇到部分 UI 被裝置螢幕上的切口遮擋的情況。您可以使用 SafeArea 小部件來解決此問題，它會將其子小部件嵌入以避開入侵（如劉海和攝像頭切口）、作業系統 UI（如 Android 上的狀態列）或物理顯示器的圓角。

如果您不希望出現此行為，SafeArea 小部件允許您停用其任何四個側面的填充。預設情況下，所有四個側面都已啟用。

通常建議將 Scaffold 小部件的主體包裝在 SafeArea 中，這是一個很好的起點，但您並非總是需要將其放置在 Widget 樹的如此高處。

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

使用 SafeArea 可確保您的應用程式內容不會被物理顯示功能或作業系統 UI 剪裁，即使新裝置以不同的形狀和樣式的切口進入市場，也能確保您的應用程式成功執行。

SafeArea 如何在少量程式碼中完成如此多的工作？它在後臺使用了 MediaQuery 物件。

如 SafeArea 部分所述，MediaQuery 是一個功能強大的小部件，用於建立自適應應用程式。有時您會直接使用 MediaQuery，有時您會使用 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 確保您的應用程式內容不會以通用方式被剪裁，即使新裝置以不同的形狀和樣式的切口進入市場，也能確保您的應用程式成功執行。