MediaQuery 是 Flutter 中用于获取设备屏幕和布局信息的一个非常重要的工具。它可以帮助我们根据设备的屏幕大小、像素密度、方向、文本缩放等参数来调整 UI，使得应用在不同的设备上具有良好的适配性。

1. MediaQuery 的作用

MediaQuery 主要用于获取以下信息：

• 屏幕的尺寸：宽度、高度、设备像素密度等。
• 屏幕的方向：是否是竖屏或横屏。
• 文本缩放因子：支持不同字体大小的用户设置。
• 安全区域：例如刘海屏、状态栏、导航栏等区域的安全空间。
• 屏幕亮度、像素比例等其他信息。

2. 使用 MediaQuery

你可以通过 MediaQuery.of(context) 获取到当前设备的屏幕信息。以下是一些常见用法：

示例代码：使用 MediaQuery 获取设备信息

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度和高度
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    // 获取设备的像素密度
    double pixelRatio = MediaQuery.of(context).devicePixelRatio;

    // 获取当前屏幕的方向
    Orientation orientation = MediaQuery.of(context).orientation;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('MediaQuery 示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('屏幕宽度: $width'),
              Text('屏幕高度: $height'),
              Text('像素密度: $pixelRatio'),
              Text('屏幕方向: ${orientation == Orientation.portrait ? "竖屏" : "横屏"}'),
            ],
          ),
        ),
      ),
    );
  }
}

3. 常用的 MediaQuery 属性

MediaQuery 提供了多个有用的属性：

• MediaQuery.of(context).size：屏幕的大小（Size 类型），可以获取 width 和 height。
• MediaQuery.of(context).devicePixelRatio：设备的像素密度，通常情况下，手机屏幕的像素密度为 2 或 3，代表高密度显示。
• MediaQuery.of(context).textScaleFactor：文本缩放因子，表示用户可能对文本大小做了调整（通常用于无障碍设置）。
• MediaQuery.of(context).orientation：当前屏幕的方向（Orientation.portrait 或 Orientation.landscape）。
• MediaQuery.of(context).padding：设备的安全区域，即可能被系统 UI 占用的区域（例如，状态栏、底部导航栏、刘海屏等）。
• MediaQuery.of(context).viewInsets：屏幕被软键盘或系统 UI 元素遮挡的区域。

示例：处理安全区域和屏幕适配

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取安全区域的 padding（例如状态栏和底部导航栏的区域）
    EdgeInsets padding = MediaQuery.of(context).padding;
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('安全区域示例')),
        body: Padding(
          padding: EdgeInsets.only(top: padding.top, bottom: padding.bottom),
          child: Center(
            child: Text('这里的内容适应了设备的安全区域'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了 MediaQuery.of(context).padding 获取屏幕的安全区域（如状态栏和底部导航栏的高度），然后在布局中使用 Padding 来避免内容被遮挡。

4. 响应式布局

MediaQuery 是构建响应式布局的一个常用工具。通过判断屏幕尺寸和方向，可以灵活地调整 UI，以适应不同的屏幕和设备。

示例：根据屏幕宽度调整布局

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取屏幕宽度
    double width = MediaQuery.of(context).size.width;
    
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('响应式布局示例')),
        body: width < 600 ? buildSmallScreen() : buildLargeScreen(),
      ),
    );
  }

  // 小屏幕布局
  Widget buildSmallScreen() {
    return Center(child: Text('小屏幕布局'));
  }

  // 大屏幕布局
  Widget buildLargeScreen() {
    return Center(child: Text('大屏幕布局'));
  }
}

在这个例子中，我们根据屏幕宽度来选择不同的布局。如果屏幕宽度小于 600，显示小屏幕布局；否则，显示大屏幕布局。这种方法可以有效地实现适配不同屏幕大小的布局。

5. 总结

MediaQuery 是 Flutter 中非常强大的工具，能够帮助开发者获取设备的相关信息并动态调整布局。常见的用途包括：

• 获取屏幕尺寸、像素密度、方向等设备信息。
• 根据设备信息进行响应式布局设计。
• 处理屏幕的安全区域和软键盘等遮挡问题。

通过合理利用 MediaQuery，我们可以让 Flutter 应用在各种不同设备上展现更好的用户体验。