建立回應式和自適應式應用程式

內容

Flutter 的主要目標之一是建立一個架構，讓你可以從單一程式碼庫開發應用程式，在任何平台上看起來都很棒。

這表示你的應用程式可能會出現在各種不同大小的螢幕上，從手錶、具有兩個螢幕的可摺疊手機，到高解析度顯示器。

描述此情境的兩個術語是適應性和回應性。理想情況下，您希望您的應用程式同時具備這兩個特性，但這到底是什麼意思？這些術語很相似，但並不相同。

適應性應用程式和回應性應用程式的差異

適應性和回應性可以視為應用程式的兩個不同面向：您可以擁有非回應性的適應性應用程式，反之亦然。當然，應用程式也可以同時具備這兩個特性，或都不具備。

回應性: 通常，回應性應用程式已針對可用的螢幕尺寸調整其版面配置。這通常表示（例如），如果使用者調整視窗大小或變更裝置方向，則重新配置使用者介面。當同一個應用程式可以在各種裝置上執行時，這尤其必要，從手錶、手機、平板電腦到筆記型電腦或桌上型電腦。
適應性: 要適應應用程式在不同的裝置類型上執行，例如行動裝置和桌上型電腦，需要處理滑鼠和鍵盤輸入，以及觸控輸入。這也表示對於應用程式的視覺密度、元件選取運作方式（例如，層疊式選單與底部工作表）、使用特定於平台的功能（例如頂層視窗）等，會有不同的預期。

在以下 5 分鐘影片中深入了解

Flutter 讓您可以建立會自動適應裝置螢幕尺寸和方向的應用程式。

有兩種基本方法可以建立具有回應式設計的 Flutter 應用程式

使用 LayoutBuilder 類別: 從其 builder 屬性，您可以取得 BoxConstraints 物件。檢查限制的屬性以決定要顯示什麼。例如，如果您的 maxWidth 大於您的寬度中斷點，傳回 Scaffold 物件，其中包含一行，在左側有一個清單。如果較窄，傳回 Scaffold 物件，其中包含一個抽屜，其中包含該清單。您也可以根據裝置的高度、長寬比或其他屬性調整顯示。當限制變更時（例如，使用者旋轉手機，或將您的應用程式放入 Android 上的磁磚 UI），建置函數會執行。
在您的建置函數中使用 MediaQuery.of() 方法: 這會提供您目前應用程式的尺寸、方向等。如果您想要根據完整內容而非僅根據特定小工具的尺寸做出決定，這會更有用。同樣地，如果您使用這個，那麼如果使用者以某種方式變更應用程式的尺寸，您的建置函數會自動執行。