大螢幕裝置

本頁面提供最佳化您的應用以改善其在大螢幕上行為的指南。

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。如果您的應用有大量專案，建議使用此構建器建構函式只構建實際可見的專案小部件。

這兩個小部件建構函式中的大多數引數都相同，因此交換很簡單。但是，您需要確定 gridDelegate 的設定。

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

SliverGridDelegateWithFixedCrossAxisCount

允許您為網格指定特定數量的列。

SliverGridDelegateWithMaxCrossAxisExtent

允許您定義最大專案寬度。

解決這些情況的另一種方法是使用 BoxConstraints 的 maxWidth 屬性。這包括以下內容

• 將 GridView 包裝在 ConstrainedBox 中，併為其提供一個設定了最大寬度的 BoxConstraints。
• 如果您需要其他功能，例如設定背景顏色，請使用 Container 而不是 ConstrainedBox。

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

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

在摺疊屏裝置上執行時，當裝置摺疊時，應用可能看起來正常。但當展開時，您可能會發現應用被黑邊包圍。

如 SafeArea & MediaQuery 頁面所述，黑邊包圍意味著應用的視窗被鎖定在螢幕中心，而視窗周圍是黑色。

為什麼會發生這種情況？

當使用 MediaQuery 確定應用視窗大小時，可能會發生這種情況。當裝置摺疊時，方向被限制為縱向模式。在底層，setPreferredOrientations 會導致 Android 使用縱向相容模式，並且應用以黑邊包圍狀態顯示。在黑邊包圍狀態下，MediaQuery 永遠不會收到允許 UI 展開的更大視窗大小。

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

• 支援所有方向。
• 使用物理顯示器的尺寸。事實上，這是您將使用物理顯示器尺寸而不是視窗尺寸的少數情況之一。

如何獲取物理螢幕尺寸？

您可以使用 Flutter 3.13 中引入的 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 指南描述了三種大尺寸裝置支援級別。

第 3 級是最低支援級別，包括對滑鼠和手寫筆輸入的支援（Material 3 指南，Apple 指南）。

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

但是，如果您有自定義小部件怎麼辦？請檢視 使用者輸入頁面，獲取有關為小部件新增輸入支援的指南。

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

有關更多資訊（和相應的示例程式碼），請檢視 問題：導航欄，這是 為大螢幕開發 Flutter 應用文章中的一個部分。