大屏幕设备

本页面提供有关优化应用以改善其在大屏幕设备上的行为的指南。

Flutter 与 Android 一样，将大屏幕定义为平板电脑、折叠屏设备以及运行 Android 的 Chrome OS 设备。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，您可以使用它们，即

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永远不会收到允许 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 应用文章中的一个部分。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-08-06。 查看源代码 或 报告问题.