自適應設計最佳實踐

自適應設計的推薦最佳實踐包括

在設計應用時，儘量將大型複雜的小部件分解成更小、更簡單的小部件。

重構小部件可以透過共享核心程式碼來降低採用自適應 UI 的複雜性。此外還有其他好處

• 在效能方面，擁有大量小的 const 小部件比擁有大型複雜的小部件能更快地重建。
• Flutter 可以重用 const 小部件例項，而較大的複雜小部件則必須為每次重建進行設定。
• 從程式碼健康的角度來看，將 UI 組織成更小的片段有助於降低每個 Widget 的複雜性。一個不那麼複雜的 Widget 更具可讀性，更容易重構，並且不太可能出現意外行為。

要了解更多資訊，請檢視通用方法中的自適應設計的 3 個步驟。

除了螢幕尺寸之外，你還應該花時間考慮不同尺寸裝置的獨特優勢和劣勢。你的多平臺應用並非總能在所有地方提供相同的功能。考慮在某些裝置類別上是否應該專注於特定功能，甚至移除某些功能。

例如，移動裝置便攜並有攝像頭，但它們不適合進行細緻的創意工作。考慮到這一點，你可能會更側重於為移動 UI 捕獲內容並用位置資料對其進行標記，但對於平板電腦或桌面 UI，則側重於組織或操作該內容。

另一個例子是利用網路的極低共享門檻。如果你正在部署 Web 應用程式，請決定支援哪些深層連結，並以此為念設計你的導航路由。

這裡的關鍵要點是思考每個平臺最擅長什麼，並檢視是否有可以利用的獨特功能。

構建出色的觸控 UI 通常比傳統的桌面 UI 更困難，部分原因是缺少右鍵單擊、滾輪或鍵盤快捷鍵等輸入加速器。

解決這個挑戰的一種方法是最初專注於出色的觸控 UI。你仍然可以使用桌面目標進行大部分測試，以提高迭代速度。但是，請記住經常切換到移動裝置以驗證一切是否正常。

在完善了觸控介面之後，你可以調整滑鼠使用者的視覺密度，然後新增所有其他輸入。將這些其他輸入視為加速器——使任務更快的替代方案。需要考慮的重要事項是使用者在使用特定輸入裝置時期望什麼，並在你的應用中體現出來。

自適應應用在不同大小和形狀的視窗上都應該表現良好。雖然將應用鎖定到手機上的豎屏模式可以幫助縮小最小可行產品的範圍，但它會增加未來使應用自適應所需的精力。

例如，假設手機僅以全屏豎屏模式渲染您的應用程式並不能保證。多視窗應用程式支援正變得越來越普遍，摺疊裝置有許多用例最適合多個應用程式並排執行。

如果您絕對必須將您的應用程式鎖定在豎屏模式下（但不應該），請使用 Display API 而不是 MediaQuery 等來獲取螢幕的物理尺寸。

總結一下

• 鎖定螢幕可能對某些使用者來說是可訪問性問題。
• Android 大尺寸裝置要求在最低級別支援縱向和橫向。
• Android 裝置可以覆蓋鎖定的螢幕
• Apple 指南建議目標是支援兩種方向

避免在 widget 樹頂部附近使用 MediaQuery 的 orientation 欄位或 OrientationBuilder 來切換不同的應用程式佈局。這類似於不檢查裝置型別來確定螢幕尺寸的指導。裝置的朝向也並不一定能告知您應用程式視窗有多少可用空間。

相反，如通用方法頁面所述，使用 MediaQuery 的 sizeOf 或 LayoutBuilder。然後使用自適應斷點，例如Material 推薦的斷點。

使用視窗全部寬度來顯示方框或文字欄位的應用程式在這些應用程式在大螢幕上執行時表現不佳。

要了解如何避免這種情況，請檢視使用 GridView 佈局。

在制定佈局決策時，避免編寫檢查正在執行的裝置是“手機”還是“平板電腦”或任何其他型別的裝置的程式碼。

您的應用程式實際獲得的渲染空間並不總是與裝置的整個螢幕尺寸相關聯。Flutter 可以執行在許多不同的平臺上，您的應用程式可能在 ChromeOS 上執行在一個可調整大小的視窗中，在平板電腦上與其他應用程式並排以多視窗模式執行，甚至在手機上以畫中畫模式執行。因此，裝置型別和應用程式視窗大小實際上並沒有很強的關聯性。

相反，使用 MediaQuery 獲取你的應用當前執行的視窗大小。

這不僅對 UI 程式碼有幫助。要了解抽象出裝置功能如何幫助您的業務邏輯程式碼，請檢視 2022 年 Google I/O 演講 Flutter lessons for federated plugin development。

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

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

要了解如何為自定義 widget 新增此支援，請檢視使用者輸入與輔助功能。

要維持列表中的滾動位置，且當裝置方向改變時其佈局不改變，請使用 PageStorageKey 類。PageStorageKey 會在 widget 被銷燬後將其狀態持久化到儲存中，並在重新建立時恢復狀態。

你可以在Wonderous 應用中看到一個示例，它將列表的狀態儲存在 SingleChildScrollView 小部件中。

如果 List widget 在裝置方向改變時改變了其佈局，您可能需要進行一些數學計算（示例）才能在螢幕旋轉時改變滾動位置。

應用應在裝置旋轉、視窗大小改變或摺疊展開時保留或恢復應用狀態。預設情況下，應用應保持狀態。

如果您的應用在裝置配置期間丟失狀態，請驗證您的應用使用的外掛和原生擴充套件是否支援裝置型別，例如大螢幕。一些原生擴充套件可能會在裝置位置改變時丟失狀態。

有關實際發生此情況的更多資訊，請檢視 Medium 上的免費文章 Developing Flutter apps for Large screens 中的 問題：摺疊/展開導致狀態丟失。