大屏幕设备

此页面提供有关优化您的应用程序以改善其在大屏幕上的行为的指导。

Flutter 与 Android 一样，将 大屏幕 定义为平板电脑、折叠屏和运行 Android 的 ChromeOS 设备。Flutter 还将大屏幕设备定义为网页、桌面和 iPad。

请考虑以下应用的屏幕截图。该应用在 ListView 中显示其 UI。左侧的图像显示了在移动设备上运行的应用。右侧的图像显示了在应用此页面建议之前的大屏幕设备上运行的应用。

这不是最佳的。

Android 大屏幕应用质量指南 和 iOS 等效指南 指出，文本和框都不应占据整个屏幕宽度。如何以自适应的方式解决这个问题？

一种常见的解决方案是使用 GridView，如下一节所示。

您可以使用 GridView 小部件将现有的 ListView 转换为更合理大小的项目。

GridView 与 ListView 小部件类似，但它不是只处理线性排列的小部件列表，而是可以将小部件排列在二维数组中。

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 在其设计指南中都**建议**不要锁定屏幕方向，但有些应用程序仍然会锁定屏幕方向。请注意，这可能会在可折叠设备上运行应用程序时导致问题。

在可折叠设备上运行时，应用程序在设备折叠时可能看起来正常。但是，当展开时，你可能会发现应用程序被黑边包围。

如 安全区域和 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 指南描述了三种大型格式设备支持级别。

第三层，最低级别的支持，包括对鼠标和触控笔输入的支持（Material 3 指南，Apple 指南）。

如果您的应用使用 Material 3 及其按钮和选择器，那么您的应用已经内置了对各种附加输入状态的支持。

但是，如果您有自定义小部件怎么办？查看用户输入页面，了解有关为小部件添加输入支持的指南。

在处理各种不同尺寸的设备时，导航可能会带来独特的挑战。通常，您希望在BottomNavigationBar和NavigationRail之间切换，具体取决于可用的屏幕空间。

有关更多信息（以及相应的示例代码），请查看问题：导航栏，这是为大型屏幕开发 Flutter 应用文章中的一个部分。