響應式設計的最佳實務

響應式設計的建議最佳實務包括

在設計您的應用程式時，嘗試將大型、複雜的 Widget 分解為較小、較簡單的 Widget。

重構 Widget 可以透過共享核心程式碼來降低採用響應式 UI 的複雜性。還有其他好處

• 在效能方面，擁有許多小的 const Widget 比擁有大型、複雜的 Widget 可以改善重建時間。
• Flutter 可以重複使用 const Widget 實例，而較大的複雜 Widget 必須為每次重建進行設定。
• 從程式碼健康的角度來看，將您的 UI 組織成較小的部分有助於降低每個 Widget 的複雜性。較不複雜的 Widget 更易於閱讀、更易於重構，並且不太可能產生令人驚訝的行為。

若要深入瞭解，請查看一般方法中響應式設計的 3 個步驟。

除了螢幕尺寸外，您還應該花時間考慮不同外型規格的獨特優勢和劣勢。您的跨平台應用程式在任何地方都提供相同的功能並不總是理想的。考慮在某些裝置類別上專注於特定功能，甚至移除某些功能是否合理。

例如，行動裝置是可攜式的，並且有相機，但它們不太適合詳細的創意工作。考慮到這一點，您可能會更專注於使用行動 UI 捕獲內容並使用位置資料標記，但專注於組織或操作平板電腦或桌上型電腦 UI 的內容。

另一個範例是利用網路極低的共享障礙。如果您正在部署 Web 應用程式，請決定要支援哪些深層連結，並在設計導航路徑時考慮這些連結。

這裡的重點是考慮每個平台最擅長什麼，並看看是否有您可以利用的獨特功能。

建立出色的觸控 UI 通常可能比傳統的桌上型電腦 UI 更困難，部分原因是缺乏諸如右鍵點擊、滾輪或鍵盤快捷鍵之類的輸入加速器。

應對此挑戰的一種方法是首先專注於出色的觸控導向 UI。您仍然可以使用桌面目標進行大部分測試，以提高其迭代速度。但是，請記得經常切換到行動裝置以驗證一切都感覺正常。

在您完善觸控介面後，您可以為滑鼠使用者調整視覺密度，然後在頂部疊加所有其他輸入。將這些其他輸入視為加速器，這是使任務更快的替代方案。重要的是要考慮使用者在使用特定輸入裝置時的期望，並努力在您的應用程式中反映出來。

響應式應用程式應在不同大小和形狀的視窗上看起來都不錯。雖然在手機上將應用程式鎖定為直向模式可以幫助縮小最低可行產品的範圍，但它可能會增加未來使應用程式具有響應式能力的努力。

例如，假設手機只會在全螢幕直向模式下呈現您的應用程式並非保證。多視窗應用程式支援正變得越來越普遍，而且可折疊裝置的許多使用案例在並排運行多個應用程式時效果最佳。

如果您絕對必須將應用程式鎖定為直向模式（但不要這麼做），請使用 Display API 而不是像 MediaQuery 之類的東西來取得螢幕的物理尺寸。

總結來說

• 鎖定的螢幕對某些使用者來說可能是協助工具問題
• Android 大型格式層需要在最低層級支援直向和橫向。
• Android 裝置可以覆寫鎖定的螢幕
• Apple 指南說目標是支援兩種方向

避免使用 MediaQuery 的方向欄位或 OrientationBuilder 來切換不同的應用程式佈局。這與不檢查裝置類型以判斷螢幕尺寸的指導原則類似。裝置的方向也不一定會告訴您應用程式視窗有多少空間。

相反，請使用 MediaQuery 的 sizeOf 或 LayoutBuilder，如一般方法頁面中所述。然後使用Material建議的響應式斷點之類的斷點。

當這些應用程式在大螢幕上執行時，使用視窗的全寬來顯示方塊或文字欄位的應用程式無法正常運作。

若要瞭解如何避免這種情況，請查看使用 GridView 進行佈局。

在做出佈局決策時，避免編寫程式碼來檢查您執行的裝置是「手機」還是「平板電腦」或任何其他類型的裝置。

您的應用程式實際給予渲染的空間並不總是與裝置的全螢幕尺寸相關。Flutter 可以在許多不同的平台上執行，您的應用程式可能在 ChromeOS 上的可調整大小的視窗中執行，與平板電腦上多視窗模式中的另一個應用程式並排執行，甚至在手機上以子母畫面模式執行。因此，裝置類型和應用程式視窗大小並非真正密切相關。

相反，請使用 MediaQuery 來取得您的應用程式目前正在執行的視窗大小。

這不僅對 UI 程式碼有用。若要瞭解如何抽象化裝置功能可以協助您的業務邏輯程式碼，請查看 2022 年 Google I/O 演講，Flutter 聯合外掛程式開發課程。

應用程式應支援基本的滑鼠、觸控板和鍵盤快捷鍵。最常見的使用者流程應支援鍵盤導航，以確保協助工具。特別是，您的應用程式應遵循大型裝置上鍵盤的協助工具最佳實務。

Material 函式庫提供了具有出色的觸控、滑鼠和鍵盤互動預設行為的 Widget。

若要瞭解如何將此支援新增至自訂 Widget，請查看使用者輸入和協助工具。

若要在裝置方向變更時，維護佈局不變的列表中的捲動位置，請使用PageStorageKey類別。PageStorageKey會在 Widget 銷毀後將 Widget 狀態保留在儲存中，並在重新建立時還原狀態。

您可以在Wonderous 應用程式中看到一個範例，其中它將列表的狀態儲存在 SingleChildScrollView Widget 中。

如果 List Widget 在裝置方向變更時變更其佈局，您可能必須執行一些數學運算（範例）以在螢幕旋轉時變更捲動位置。

應用程式應在裝置旋轉、視窗大小變更或摺疊和展開時保留或還原應用程式狀態。預設情況下，應用程式應維持狀態。

如果您的應用程式在裝置配置期間遺失狀態，請驗證您的應用程式使用的外掛程式和原生擴充功能是否支援裝置類型，例如大螢幕。當裝置變更位置時，某些原生擴充功能可能會遺失狀態。

若要取得有關此情況發生的真實案例的詳細資訊，請查看問題：摺疊/展開會導致狀態遺失，位於 Medium 上的一篇免費文章為大螢幕開發 Flutter 應用程式。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-05-13。 檢視來源 或 回報問題。