大屏幕设备

本页提供了关于优化您的应用以改善其在大屏幕设备上表现的指南。

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 应用文章中的一个章节。