大螢幕裝置

本頁提供關於優化您的應用程式，使其在大螢幕上表現更佳的指南。

如同 Android，Flutter 將大螢幕定義為平板電腦、摺疊裝置以及執行 Android 的 ChromeOS 裝置。Flutter 也將大螢幕裝置定義為網頁、桌機和 iPad。

請參考以下應用程式的螢幕截圖。該應用程式在其 UI 中顯示一個 ListView。左圖顯示應用程式在行動裝置上執行。右圖顯示應用程式在大螢幕裝置上執行，在應用本頁建議之前。

這不是最佳的狀態。

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，您可以使用，分別是：

SliverGridDelegateWith<b>FixedCrossAxisCount</b>

讓您可以為網格指派特定的欄數。

SliverGridDelegateWith<b>MaxCrossAxisExtent</b>

讓您可以定義項目的最大寬度。

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

• 將 GridView 包裹在 ConstrainedBox 中，並給予其設定了最大寬度的 BoxConstraints。
• 如果您想要其他功能，例如設定背景顏色，請使用 Container 而不是 ConstrainedBox。

對於選擇最大寬度值，請考慮使用 Material 3 在應用佈局指南中建議的值。

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

在摺疊裝置上執行時，應用程式在裝置摺疊時看起來可能正常。但是，在展開時，您可能會發現應用程式出現黑邊。

如SafeArea & MediaQuery 頁面所述，黑邊表示應用程式的視窗被鎖定在螢幕中央，而視窗周圍則有黑色區域。

為什麼會發生這種情況？

當使用 MediaQuery 來計算應用程式的視窗大小時，可能會發生這種情況。當裝置摺疊時，方向會限制為直向模式。在幕後，setPreferredOrientations 會導致 Android 使用直向相容模式，並且應用程式會以黑邊狀態顯示。在黑邊狀態下，MediaQuery 永遠不會收到允許使用者介面擴展的較大視窗大小。

您可以使用以下兩種方法之一解決此問題：

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

如何取得實體螢幕尺寸？

您可以使用 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 應用程式文章中的一個章節。

除非另有說明，否則本網站上的文件反映了 Flutter 的最新穩定版本。頁面上次更新時間為 2024-08-06。 檢視原始碼 或 回報問題。