大螢幕裝置

本頁面旨在指導您如何最佳化應用，以改善其在大螢幕上的表現。

Flutter 與 Android 一樣，將大螢幕定義為執行 Android 的平板電腦、摺疊屏裝置和 ChromeOS 裝置。Flutter 還將 Web、桌面端和 iPad 定義為大螢幕裝置。

參考以下應用截圖。該應用使用 ListView 顯示 UI。左圖顯示的是應用在移動裝置上執行的情況。右圖顯示的是應用在應用本頁建議之前，在大螢幕裝置上執行的情況。

這種效果並不理想。

Android 大螢幕應用質量指南和 iOS 等效指南均指出，文字和容器都不應占用整個螢幕寬度。如何以自適應方式解決這個問題？

一種常見的解決方案是使用 GridView，詳見下一節。

您可以使用 GridView 元件將現有的 ListView 轉換為尺寸更合理的條目佈局。

GridView 與 ListView 元件類似，但 GridView 不僅僅處理線性排列的元件列表，它還可以將元件排列在二維陣列中。

GridView 也擁有與 ListView 類似的建構函式。ListView 的預設建構函式對應 GridView.count，而 ListView.builder 則類似於 GridView.builder。

GridView 還有一些用於實現更自定義佈局的額外建構函式。要了解更多資訊，請訪問 GridView API 頁面。

例如，如果您的原始應用使用了 ListView.builder，請將其替換為 GridView.builder。如果您的應用包含大量條目，建議使用此 builder 建構函式，以便僅構建當前可見的條目元件。

這兩個元件的建構函式中，大多數引數都是相同的，因此替換非常直觀。不過，您需要確定如何設定 gridDelegate。

Flutter 提供了功能強大的預製 gridDelegates 供您使用，即：

SliverGridDelegateWithFixedCrossAxisCount

允許您為網格分配特定的列數。

SliverGridDelegateWithMaxCrossAxisExtent

允許您定義條目的最大寬度。

處理這些情況的另一種方法是使用 BoxConstraints 的 maxWidth 屬性。這包括以下步驟：

• 用 ConstrainedBox 包裹 GridView，併為其設定一個最大寬度的 BoxConstraints。
• 如果您需要其他功能（例如設定背景顏色），請使用 Container 代替 ConstrainedBox。

在選擇最大寬度值時，請考慮使用 Material 3 佈局應用 (Applying layout) 指南中推薦的值。

如前所述，Android 和 Flutter 的設計指南都建議不要鎖定螢幕方向，但有些應用仍然鎖定了。請注意，在摺疊屏裝置上執行應用時，這可能會導致問題。

當在摺疊屏上執行時，應用在摺疊狀態下可能看起來正常。但在展開時，您可能會發現應用被“信箱模式”（letterboxed）處理了。

正如 SafeArea & MediaQuery 頁面所述，信箱模式意味著應用視窗被鎖定在螢幕中央，而視窗周圍則是黑邊。

為什麼會發生這種情況？

當使用 MediaQuery 來計算應用視窗大小時，可能會出現這種情況。當裝置摺疊時，方向被限制為縱向。在底層，setPreferredOrientations 會導致 Android 使用縱向相容模式，應用以信箱模式顯示。在信箱模式下，MediaQuery 永遠無法接收到允許 UI 擴充套件的更大視窗尺寸。

您可以透過以下兩種方式之一來解決此問題：

• 支援所有方向。
• 使用物理顯示屏的尺寸。事實上，這是極少數需要使用物理顯示尺寸而非視窗尺寸的情況之一。

如何獲取物理螢幕尺寸？

您可以使用 Display API，其中包含物理裝置的尺寸、畫素比和重新整理率。

以下示例程式碼演示瞭如何獲取 Display 物件：

/// AppState object.
ui.FlutterView? _view;
​
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  _view = View.maybeOf(context);
}
​
void didChangeMetrics() {
  final ui.Display? display = _view?.display;
}

重點是找到您關注的檢視所對應的顯示器。這建立了一個前瞻性的 API，旨在處理當前及未來的多顯示器和多檢視裝置。

增加對更多螢幕的支援，也意味著要擴充套件輸入控制。

Android 指南描述了三個級別的大尺寸裝置支援。

Level 3（最低支援級別）包括對滑鼠和觸控筆輸入的支援（Material 3 指南，Apple 指南）。

如果您的應用使用了 Material 3 及其按鈕和選擇器，那麼您的應用已經內建了對各種額外輸入狀態的支援。

但是，如果您使用了自定義元件呢？請檢視 使用者輸入 頁面，獲取有關為 元件新增輸入支援 的指導。

在處理各種不同尺寸的裝置時，導航可能會帶來獨特的挑戰。通常，您需要根據可用的螢幕空間在 BottomNavigationBar 和 NavigationRail 之間進行切換。

如需更多資訊（以及相應的示例程式碼），請檢視 問題：導航欄 (Problem: Navigation rail)，這是 Developing Flutter apps for Large screens 文章中的一個章節。