MediaQuery — 是什么、工作原理与自适应布局

什么是 MediaQuery

MediaQuery — 是一个 Flutter 的 widget 和类，提供应用程序媒体环境的数据。MediaQuery 将整个应用程序包裹在 MaterialApp 或 CupertinoApp 根 widget 中，任何子 widget 都可以通过 MediaQuery.of(context) 访问这些数据。

当 Flutter 启动应用程序时，它会创建一个 MediaQueryData 实例，包含当前设备的所有指标。这些数据在发生变化时自动更新：设备旋转、窗口大小改变（桌面端）、键盘出现或系统辅助功能设置更改。MediaQuery 在每次数据更改时重建 widget 子树，确保界面的响应式适应。

MediaQueryData 包括：size（屏幕尺寸）、devicePixelRatio（像素密度）、textScaleFactor（系统设置中的字体缩放）、viewInsets（键盘覆盖区域）、viewPadding（系统边距）、orientation（方向）和 platformBrightness（浅色或深色主题）。

结论：MediaQuery — Flutter 中设备信息的中心来源。访问 MediaQuery.of(context) 是构建任何自适应界面的第一步。

MediaQueryData 的主要属性

MediaQueryData 包含数十个属性，但最常用的是那些影响布局构建的属性。让我们来探讨关键属性。

Size — 屏幕尺寸

MediaQuery.of(context).size 返回一个 Size 对象，包含以逻辑像素（设备独立像素，dip）为单位的屏幕宽度和高度。这些值不考虑系统边距。对于自适应布局的计算，size 是主要指标：基于它确定移动端、平板端和桌面端布局的断点。

ViewPadding — 系统边距

ViewPadding — 系统为状态栏、刘海屏、系统导航面板和主页指示器（在 iOS 上）预留的边距。不考虑这些边距，内容可能会出现在系统元素下方。MediaQuery.of(context).padding 返回一个 EdgeInsets，应作为 padding 应用于页面的根容器。

ViewInsets — 键盘区域

ViewInsets — 被软件键盘覆盖的屏幕区域。对于输入字段，跟踪 viewInsets.bottom 至关重要，以便将内容提升到键盘上方。Flutter 在 scaffold 中自动处理此问题，但对于自定义布局，应直接使用 MediaQuery.of(context).viewInsets。

Orientation — 设备方向

Orientation — 纵向（portrait）或横向（landscape）方向。通过比较宽度和高度来确定：如果宽度小于高度 — 纵向，否则 — 横向。在生产代码中，方向用于在元素的垂直和水平排列之间切换。

结论：四个关键属性 — size、viewPadding、viewInsets 和 orientation — 覆盖了 90% 的自适应设计任务。其余属性（textScaleFactor、platformBrightness、devicePixelRatio）用于特定场景。

使用 MediaQuery 实现自适应布局

MediaQuery — Flutter 中自适应设计的基础。通过它确定断点，布局根据屏幕尺寸变化，边距根据不同设备进行调整。

典型场景：移动应用程序需要显示产品列表。在手机上（宽度 < 600dp）— 一列。在平板上（宽度 600–900dp）— 两列。在桌面上（宽度 > 900dp）— 三列。MediaQuery.of(context).size.width 允许动态选择列数，而无需为每种外形因素设置单独的屏幕。

第二个场景：考虑现代设备上的系统手势边距。在配备动态岛的 iPhone 或使用手势导航的 Android 上，系统边距占用部分屏幕。MediaQuery.of(context).padding 为每种设备类型返回正确的值，Scaffold 通过 body 自动应用这些值。对于自定义 widget，需要从 MediaQuery 显式传递 padding。

第三个场景：适应系统辅助功能设置。MediaQuery.of(context).textScaleFactor 显示用户在设置中放大了多少字体。当 textScaleFactor > 1.3 时，布局可能会崩溃 — 长文本超出卡片边界。自适应布局应考虑这一点，并在必要时切换到更简单的布局。

结论：MediaQuery — 不仅是指标来源，更是构建真正自适应界面的工具。将其用于断点、安全区域和辅助功能考虑。

MediaQuery 代码示例

示例 1 演示了获取屏幕尺寸并应用断点来选择列数。

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

上面的示例展示了一个基于屏幕宽度选择列数的函数。断点 600 和 900 对应于 Material Design 中为手机、平板和桌面普遍接受的标准。

示例 2 — 使用 MediaQuery 和 viewPadding 考虑系统边距来正确放置内容。

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

在此示例中，padding 使用系统边距将内容包裹在 Padding 中。top 考虑状态栏和刘海屏，left/right — 安全区域。bottom 未包含，因为 Scaffold 通常自己处理底部导航。

示例 3 — 确定方向并更改元素布局。

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

在纵向模式下，元素垂直排列（Column），在横向模式下 — 水平排列（Row）。这种方法在设备旋转时提供了最佳的空间利用。

结论：MediaQuery — 构建自适应布局的主要工具。在开发 Flutter 界面时，始终考虑系统边距、断点和方向。

使用 MediaQuery 时的常见错误

错误 1：在未设置 MediaQuery 的上下文之外调用 MediaQuery.of(context)。如果 widget 在树中位于 MediaQuery 之上，调用将导致运行时错误。解决方法：始终在 MaterialApp 或 CupertinoApp 包裹的 widget 内调用 MediaQuery.of(context)，其中 MediaQuery 被设置为根 widget。

错误 2：忘记安全区域。开发人员使用 MediaQuery.size 放置元素时没有考虑系统边距。在带有刘海屏或手势导航的设备上，内容会出现在状态栏下方。解决方法：从定位坐标中减去 MediaQuery.of(context).padding。

错误 3：硬性绑定尺寸。使用 MediaQuery.of(context).size.width 来设置元素的精确尺寸（width: size.width * 0.3）仅适用于同一外形因素的设备。在桌面或平板上，布局看起来不自然。解决方法：使用断点结合 Expanded 和 Flexible 实现灵活布局，而不是硬百分比。

错误 4：忽略 textScaleFactor。当用户增大系统字体时，界面可能会崩溃 — 文本超出容器边界。解决方法：检查 MediaQuery.of(context).textScaleFactor，在值超过 1.3 时切换到带有滚动的更简单布局。

结论：MediaQuery — 强大但精妙的工具。考虑系统边距、方向和辅助功能设置，以确保界面在所有设备上正确显示。