大屏幕设备

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

与 Android 一样，Flutter 将 大屏幕 定义为平板电脑、折叠屏设备以及运行 Android 的 ChromeOS 设备。Flutter 还 将大屏幕设备定义为 Web、桌面和 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，您可以使用的包括：

SliverGridDelegateWithFixedCrossAxisCount

允许您为网格指定特定的列数。

SliverGridDelegateWithMaxCrossAxisExtent

允许您定义最大项目宽度。

另一种处理这些情况的方法是使用 BoxConstraints 的 maxWidth 属性。这涉及以下内容：

• 使用 ConstrainedBox 包装 GridView，并为其提供一个设置了最大宽度的 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 指南描述了三种大型格式设备支持级别。

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

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

但是，如果您有一个自定义小部件怎么办？请查看 用户输入 页面，以获取有关添加 小部件输入支持 的指导。

导航在处理各种不同尺寸的设备时可能会产生独特的挑战。通常，您希望根据可用的屏幕空间在 BottomNavigationBar 和 NavigationRail 之间切换。

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