適應性應用程式的一般方法

那麼，究竟如何著手將為傳統行動裝置設計的應用程式，使其在各種裝置上都能呈現美觀的效果？需要哪些步驟？

曾為大型應用程式進行這項工作的 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 的佈局約束。這表示您會根據您新增 LayoutBuilder 的 widget 樹狀結構中的特定位置取得大小資訊。此外，LayoutBuilder 會傳回 BoxConstraints 物件而不是 Size 物件，因此您會獲得內容的有效寬度和高度範圍（最小值和最大值），而不僅僅是固定大小。這對於自訂 widget 很有用。

例如，假設有一個自訂 widget，您希望其大小調整是以專門給予該 widget 的空間為基礎，而不是整個應用程式視窗。在這種情況下，請使用 LayoutBuilder。

此時，您必須決定選擇顯示哪個版本的 UI 時要使用的大小斷點。例如，Material 佈局指南建議對於寬度小於 600 邏輯像素的視窗使用底部導覽列，而對於寬度為 600 像素或更大的視窗則使用導覽側邊欄。同樣地，您的選擇不應取決於裝置的類型，而應取決於裝置可用的視窗大小。

若要逐步執行在 NavigationRail 和 NavigationBar 之間切換的範例，請查看使用 Material 3 建立動畫回應式應用程式佈局。

下一頁將討論如何確保您的應用程式在大型螢幕和可摺疊裝置上呈現最佳外觀。

除非另有說明，否則本網站上的文件反映的是 Flutter 的最新穩定版本。頁面上次更新時間為 2024-10-24。 檢視原始碼 或回報問題。