建立響應式和自適應的應用
Flutter 的首要目標,是建構一個可以使用單一程式碼來源,開發在所有平臺上都有著良好的視覺和體驗的應用的框架。
這意味著你的應用可能會在不同大小的螢幕上使用,從智慧手錶,到可摺疊的雙屏裝置,再到高畫質顯示器。
通常這樣的考量被分為兩種概念:自適應 和 響應式。理想條件下,你的應用應該兩者兼具,但是它們究竟代表了什麼?這兩種概念有些類似,但並不是同一種含義。
自適應應用和響應式應用的區別
自適應 和 響應式 可以看作應用裡的兩種維度:你的應用可能是自適應的,但不是響應式的,又或是反行其道。當然,你的應用可能既自適應又為響應式,也可能兩者均未實現。
響應式
通常來說,一個 響應式 應用的佈局會根據可用的螢幕大小而調整。常見的場景是在使用者重新調整視窗大小或旋轉螢幕時,重新佈局 UI。對於需要在多種裝置(手錶、手機、平板、筆記本或桌上型電腦)上執行的應用而言,這是必要的要素。
自適應
應用以 自適應 的方式在不同的裝置上(移動端和桌面端)執行,需要同時處理滑鼠、鍵盤和觸控輸入。這也意味著應用的視覺密度、元件的選擇(層級選單或底部抽屜)、平台特定的行為(例如置頂的視窗)等內容將在不同的平臺上有一定的差異。
建構一個響應式的 Flutter 應用
Flutter 讓你能夠建構自動適配螢幕大小和旋轉方向的應用。
建構響應式設計的 Flutter 應用,有以下兩種較為基礎的方式:
使用 LayoutBuilder
類
透過它的 builder
屬性,你可以得到一個 BoxConstraints
物件。你可以檢查約束裡的屬性,來決定如何進行顯示。例如,如果約束裡的 maxWidth
超過了你的寬度分界點,你可以返回一個 Scaffold
,它包含一列內容,左側是一個列表。如果約束更小,則返回一個列表在抽屜裡的 Scaffold
。你也可以根據你的裝置高度、螢幕的比例或者其他的屬性,來調整你的顯示。當約束改變時(例如使用者旋轉了手機,或是在 Android N 上將應用放置到 tile UI 中)建構方法會執行。
在建構方法中使用 MediaQuery.of()
方法
這個方法可以獲取到當前應用(基於上下文)的尺寸、旋轉方向等資訊。如果你需要基於完整的上下文資訊進行佈局決策,而不是基於特定的 widget,這個方法將非常有用。同樣的,如果應用的尺寸發生了改變,建構方法也會自動執行。
以下是其他有助於建構響應式介面的 widget:
AspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
LayoutBuilder
MediaQuery
MediaQueryData
OrientationBuilder
更多資源
想了解更多資訊,以下是一些來自社群貢獻的資源:
-
使用 Flutter 開發兼顧多種螢幕尺寸和旋轉的應用,由 Deven Joshi 撰寫
-
使用 Flutter 建構響應式介面,由 Raouf Rahiche 撰寫
-
建構響應式的 Flutter 跨平臺的登入頁,由 Priyanka Tyagi 撰寫
-
如何根據不同的螢幕大小建構響應式的 Flutter 應用?,在 StackOverflow 上的一個問題。
建立自適應的 Flutter 應用
你可以閱讀由 gskinner 團隊撰寫的 建構自適應的應用 瞭解更多關於建構自適應應用的內容。
你也可以觀看下面幾期關於自適應佈局的 The Boring Show:
想要嘗試精美的自適應應用,可以下載由 gskinner 和 Flutter 團隊共建的剪貼簿應用 Flutter Folio:
Folio 應用的原始碼 也可以在 GitHub 找到,你可以閱讀 gskinner 的部落格 瞭解更多內容。
更多資源
你可以在以下的資源中瞭解更多關於如何建構自適應平台應用的內容:
-
不同平台操作體驗的差異和適配,站內的另一篇文件。
-
設計真正能夠自適應的使用者互動,由 Aloïs Deniel 在今年的 FlutterViking 會議上釋出的文章和影片。
-
以自適應應用為目標編寫的 Flutter Gallery 應用(原始碼儲存庫)。