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 padding 屬性，該屬性基本上是顯示器被系統 UI、顯示器挖孔或狀態列部分遮擋的量。

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

答案是 SafeArea 執行了一項巧妙的操作，使其比僅使用原始 MediaQueryData 更具優勢。具體來說，它修改了暴露給 SafeArea 子元件的 MediaQuery，使其看起來好像新增到 SafeArea 的填充不存在。這意味著您可以巢狀 SafeArea，並且只有最頂層的 SafeArea 會應用避免劉海和系統 UI 所需的填充。

隨著您的應用增長以及您移動元件，您不必擔心應用了過多的填充，因為您有多個 SafeArea，而直接使用 MediaQueryData.padding 會出現問題。

您可以將 Scaffold 元件的主體用 SafeArea 包裹起來，但您不必將它放置在小部件樹的這麼高的位置。SafeArea 只需要包裹那些如果被前面提到的硬體功能截斷就會導致資訊丟失的內容。

例如，如果您故意希望您的應用在挖孔下方延伸，您可以將 SafeArea 移動到包裹有意義的內容周圍，並讓應用的其餘部分佔據整個螢幕。需要注意的是，AppBar 元件預設情況下就是這樣做的，這就是它位於系統狀態列下方的方式。這也是為什麼建議將 Scaffold 的主體用 SafeArea 包裹起來，而不是將整個 Scaffold 包裹起來的原因。

SafeArea 確保您的應用內容不會以通用方式被截斷，併為您的應用在未來進入市場的新型、不同形狀和風格挖孔的裝置做好準備。