自適應應用通用方法

那麼，究竟該如何著手將專為傳統移動裝置設計的應用，適配成在各種裝置上都能完美呈現呢？需要哪些步驟？

擁有大型應用適配經驗的 Google 工程師建議採取以下 3 個步驟。

首先，確定你計劃動態化的元件。分析這些元件的建構函式，並將可以共享的資料抽象出來。

需要自適應的常見元件包括：

• 對話方塊（全屏和模態）
• 導航 UI（側邊欄和底部導航欄）
• 自定義佈局，例如“UI 區域是更高還是更寬？”

例如，在 Dialog 元件中，你可以共享包含對話方塊內容的資訊。

又或者，你可能希望在應用視窗較小時切換到 NavigationBar，而在應用視窗較大時使用 NavigationRail。這些元件通常會共享一個可導航目標列表。在這種情況下，你可以建立一個 Destination 元件來儲存此資訊，並指定 Destination 同時包含圖示和文字標籤。

接下來，你需要評估螢幕尺寸，以決定如何顯示你的 UI。

有兩種確定顯示區域大小的方法：MediaQuery 和 LayoutBuilder。

過去，你可能使用過 MediaQuery.of 來確定裝置螢幕的大小。然而，如今的裝置螢幕尺寸和形狀各異，僅憑此測試可能會產生誤導。

例如，你的應用當前可能在大型螢幕上僅佔據一個很小的視窗。如果你使用 MediaQuery.of 方法並判定螢幕較小（而實際上應用只是在大型螢幕的一個小視窗中顯示），並且你鎖定了應用的縱向模式，這會導致應用視窗被鎖定在螢幕中央，周圍留下黑邊。這在大型螢幕上絕非理想的 UI 體驗。

請記住，MediaQuery.sizeOf 返回的是應用整個螢幕的當前尺寸，而不僅僅是單個元件的尺寸。

你有兩種度量螢幕空間的方法。你可以根據是需要整個應用視窗的尺寸，還是更區域性的尺寸，來選擇使用 MediaQuery.sizeOf 或 LayoutBuilder。

如果你希望元件全屏顯示，即使應用視窗較小時也是如此，請使用 MediaQuery.sizeOf，這樣你就可以根據應用視窗本身的尺寸來選擇對應的 UI。在上一節中，由於你希望基於整個應用視窗來決定尺寸行為，因此應該使用 MediaQuery.sizeOf。

在 build 方法中請求應用視窗尺寸（如 MediaQuery.sizeOf(context)）會導致給定的 BuildContext 在 size 屬性發生任何變化時重新構建。

LayoutBuilder 實現了與 MediaQuery.sizeOf 相似的目標，但有一些區別。

LayoutBuilder 不會提供應用視窗的尺寸，而是提供來自父級 Widget 的佈局約束。這意味著你獲得的是基於你在 Widget 樹中新增 LayoutBuilder 的特定位置的尺寸資訊。此外，LayoutBuilder 返回的是 BoxConstraints 物件而不是 Size 物件，因此你得到的是內容的有效寬度和高度範圍（最小值和最大值），而不僅僅是一個固定尺寸。這對於自定義元件非常有用。

例如，想象一個自定義元件，你希望其尺寸基於專門分配給該元件的空間，而不是整個應用視窗。在這種情況下，請使用 LayoutBuilder。

此時，你需要決定在選擇顯示哪個版本的 UI 時使用什麼尺寸斷點。例如，Material 佈局指南建議，對於寬度小於 600 邏輯畫素的視窗，使用底部導航欄；而對於 600 邏輯畫素及以上的視窗，則使用導航側邊欄。同樣，你的選擇不應依賴於裝置的型別，而應取決於裝置可用的視窗大小。

要檢視如何在 NavigationRail 和 NavigationBar 之間切換的示例，請參閱 構建具有 Material 3 動效的響應式應用佈局。

下一頁將討論如何確保你的應用在大屏裝置和摺疊屏裝置上看起來效果最佳。