自適應設計最佳實踐
自適應設計一些最佳實踐的總結。
自適應設計推薦的最佳實踐包括
設計注意事項
#分解你的元件
#在設計應用程式時，嘗試將大型、複雜的元件分解為更小、更簡單的元件。
重構元件可以減少採用自適應 UI 的複雜性，從而共享核心程式碼片段。 還有其他好處
- 在效能方面，擁有大量的
const元件可以提高重建時間，而不是擁有大型、複雜的元件。 - Flutter 可以重用
const元件例項，而較大的複雜元件必須為每次重建進行設定。 - 從程式碼健康的角度來看，將 UI 組織成更小、更易於理解的片段有助於降低每個
Widget的複雜性。 複雜度較低的Widget更易於閱讀、更易於重構，並且不太可能出現令人驚訝的行為。
要了解更多資訊，請檢視 通用方法 中的自適應設計的 3 個步驟。
針對每種表單因素的設計優勢
#除了螢幕尺寸之外，您還應該花時間考慮不同表單因素的獨特優勢和劣勢。 在所有地方提供完全相同功能的跨平臺應用程式並不總是理想的。 考慮是否應該專注於特定功能，甚至在某些裝置類別上刪除某些功能。
例如，移動裝置是便攜的並且具有攝像頭，但不適合詳細的創意工作。 考慮到這一點，您可能更專注於為移動 UI 捕獲內容並使用位置資料對其進行標記，但專注於為平板電腦或桌面 UI 組織或操作該內容。
另一個例子是利用網路極低的共享門檻。 如果您正在部署 Web 應用程式，請決定支援哪些 深層連結，並根據這些連結設計您的導航路線。
這裡的關鍵要點是考慮每個平臺最擅長什麼，並檢視是否有您可以利用的獨特功能。
首先解決觸控問題
#構建出色的觸控 UI 通常比傳統的桌面 UI 更困難，部分原因是缺乏右鍵單擊、滾輪或鍵盤快捷鍵等輸入加速器。
一種解決此問題的方法是首先專注於出色的觸控 UI。 您仍然可以使用桌面目標進行大部分測試，以提高迭代速度。 但是，請記住經常切換到移動裝置以驗證一切是否感覺良好。
在完善觸控介面後，您可以為滑鼠使用者調整視覺密度，然後新增所有其他輸入。 將這些其他輸入視為加速器——使任務更快的替代方案。 重要的一點是考慮使用者在使用特定輸入裝置時期望什麼，並努力在您的應用程式中反映這一點。
實現細節
#不要鎖定應用程式的螢幕方向。
#自適應應用程式在不同大小和形狀的視窗上都應該看起來不錯。 雖然將應用程式鎖定到手機的縱向模式可以幫助縮小最小可行產品的範圍，但它可能會增加使應用程式在未來具有自適應性的工作量。
例如，手機只會以全屏縱向模式渲染您的應用程式的假設並非保證。 多視窗應用程式支援變得越來越普遍，可摺疊裝置在許多用例中最好以並排執行多個應用程式的方式工作。
如果您絕對必須將應用程式鎖定在縱向模式下（但不要這樣做），請使用 Display API 而不是像 MediaQuery 這樣的 API 來獲取螢幕的物理尺寸。
總結
避免基於裝置方向的佈局
#避免在您的元件樹的頂部附近使用 MediaQuery 的方向欄位或 OrientationBuilder 來在不同的應用程式佈局之間切換。 這類似於不要檢查裝置型別來確定螢幕大小的指導原則。 裝置的螢幕方向也不一定能告訴您您的應用程式視窗有多少空間。
相反，使用 MediaQuery 的 sizeOf 或 LayoutBuilder，如 通用方法 頁面中所述。 然後使用 Material 推薦的自適應斷點，例如 Material。
不要佔用所有水平空間
#使用視窗的全部寬度顯示框或文字欄位的應用程式在這些應用程式在大型螢幕上執行時效果不佳。
要了解如何避免這種情況，請檢視 使用 GridView 佈局。
避免檢查硬體型別
#避免編寫檢查您正在執行的裝置是“手機”還是“平板電腦”或任何其他型別裝置的任何程式碼，以便做出佈局決策。
您的應用程式實際獲得的渲染空間並不總是與裝置的完整螢幕尺寸相關。 Flutter 可以在許多不同的平臺上執行，您的應用程式可能在 ChromeOS 上的可調整大小的視窗中執行，在平板電腦的多視窗模式下與其他應用程式並排執行，甚至在手機上以畫中畫模式執行。 因此，裝置型別和應用程式視窗大小實際上並沒有緊密聯絡。
相反，使用 MediaQuery 獲取您的應用程式當前正在執行的視窗的大小。
這不僅對 UI 程式碼有幫助。 要了解抽象裝置功能如何幫助您的業務邏輯程式碼，請檢視 2022 年 Google I/O 演講 Flutter 聯合外掛開發的課程。
支援各種輸入裝置
#應用程式應支援基本的滑鼠、觸控板和鍵盤快捷鍵。 最常見的使用者流程應支援鍵盤導航，以確保可訪問性。 尤其是在大型裝置上，您的應用程式應遵循鍵盤的可訪問最佳實踐。
Material 庫提供了具有出色的預設行為的觸控、滑鼠和鍵盤互動的元件。
要了解如何將此支援新增到自定義元件，請檢視 使用者輸入和可訪問性。
恢復列表狀態
#為了在裝置方向改變時，不改變佈局的列表中保持滾動位置，請使用 PageStorageKey 類。 PageStorageKey 在元件銷燬後將元件狀態持久化到儲存中，並在重新建立時恢復狀態。
您可以在 Wonderous 應用程式 中看到此示例，它將列表的狀態儲存在 SingleChildScrollView 元件中。
如果 List 元件在裝置方向改變時改變其佈局，您可能需要進行一些計算（示例）以在螢幕旋轉時改變滾動位置。
儲存應用程式狀態
#應用程式應在裝置旋轉、視窗大小改變或摺疊和展開時保留或恢復 應用程式狀態。 預設情況下，應用程式應保持狀態。
如果您的應用程式在裝置配置期間丟失狀態，請驗證您的應用程式使用的外掛和本機擴充套件是否支援裝置型別，例如大型螢幕。 某些本機擴充套件在裝置位置改變時可能會丟失狀態。
有關發生這種情況的實際案例的更多資訊，請檢視 問題：摺疊/展開導致狀態丟失 在 為大型螢幕開發 Flutter 應用程式，Medium 上的免費文章。