自適應應用的一般方法

那麼，您如何將為傳統移動裝置設計的應用，使其在各種裝置上都美觀？需要哪些步驟？

具有此類經驗的 Google 工程師，併為大型應用執行過此類操作，建議採用以下 3 步方法。

首先，確定您計劃使其動態化的 Widget。分析這些 Widget 的建構函式，並抽象出可以共享的資料。

需要適應性的常見 Widget 包括

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

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

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

接下來，您將評估螢幕尺寸，以確定如何顯示您的 UI。

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

過去，您可能使用 MediaQuery.of 來確定裝置螢幕的大小。但是，如今的裝置具有各種尺寸和形狀的螢幕，並且此測試可能會產生誤導。

例如，您的應用當前可能佔據大螢幕上的一個小視窗。如果您使用 MediaQuery.of 方法並得出螢幕很小（實際上，該應用在大螢幕上以微小的視窗顯示），並且您已鎖定應用的縱向模式，則會導致應用視窗鎖定在螢幕中心，周圍環繞著黑色。這在大型螢幕上並不是理想的 UI。

請記住，MediaQuery.sizeOf 返回應用整個螢幕的當前大小，而不僅僅是單個 Widget。

您有兩種方法可以測量螢幕空間。您可以根據您是想要整個應用視窗的大小，還是更區域性的尺寸，使用 MediaQuery.sizeOf 或 LayoutBuilder。

如果您希望您的 Widget 即使在應用視窗較小時也能全屏顯示，請使用 MediaQuery.sizeOf，以便您可以根據應用視窗本身的大小選擇 UI。在上一節中，您希望根據整個應用的視窗來確定尺寸行為，因此您將使用 MediaQuery.sizeOf。

在 build 方法中從 MediaQuery.sizeOf(context) 請求應用視窗的大小，會導致給定的 BuildContext 每次大小屬性發生變化時都會重建。

LayoutBuilder 的目標與 MediaQuery.sizeOf 類似，但有一些區別。

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

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

此時，您必須決定在選擇要顯示的 UI 版本時使用哪些尺寸斷點。例如，Material 佈局 指南建議對於小於 600 個邏輯畫素寬的視窗使用底部導航欄，對於 600 畫素或更大的視窗使用導航側邊欄。再次強調，您的選擇不應取決於裝置型別，而應取決於裝置的可用視窗大小。

要了解在 NavigationRail 和 NavigationBar 之間切換的示例，請檢視 使用 Material 3 構建動畫響應式佈局。

下一頁將討論如何確保您的應用在大型螢幕和可摺疊裝置上看起來最佳。