Flutter MediaQuery 详解：监听设备配置动态变化（附实战示例）

在 Flutter 开发中，实现响应式界面和适配不同设备配置是一项重要任务。MediaQuery 组件为我们提供了一种高效的方式来访问和监听设备的各种配置信息，包括屏幕尺寸、方向、字体缩放比例、主题模式等。本文将详细介绍 MediaQuery 的使用方法，并通过实战示例演示如何利用它来监听设备配置的动态变化。

MediaQuery 简介

MediaQuery 是 Flutter 中用于访问设备和应用程序配置信息的重要组件。它提供了一种在 Widget 树中向下传递设备配置数据的机制，并允许我们监听这些配置的变化。

MediaQuery 能获取的主要信息

屏幕尺寸和方向：屏幕宽度、高度、像素密度、方向（横屏/竖屏）
字体配置：字体缩放比例、文本方向
主题设置：系统主题模式（深色/浅色）
安全区域：刘海屏、底部安全区域尺寸
显示配置：亮度、对比度等

实战示例：监听设备配置变化

下面我们将通过一个完整的示例来演示如何使用 MediaQuery 监听设备配置的动态变化。

1. 基础示例：全局监听与配置

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MediaQuery 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      themeMode: ThemeMode.system, // 跟随系统主题模式
      
      // 路由配置
      routes: {
        '/': (context) => const MyHomePage(title: 'MediaQuery 监听示例'),
      },
      initialRoute: '/',
      
      // 全局构建器：拦截并处理 MediaQuery 数据
      builder: (context, widget) {
        // 1. 监听系统字体缩放因子变化
        final textScaleFactor = MediaQuery.of(context).textScaleFactor;
        print('📱 系统字体缩放比例：$textScaleFactor');

        // 2. 监听系统主题模式切换
        final brightness = MediaQuery.of(context).platformBrightness;
        final themeMode = brightness == Brightness.light ? '浅色主题' : '深色主题';
        print('🎨 当前主题模式：$themeMode');

        // 3. 监听屏幕方向变化
        final orientation = MediaQuery.of(context).orientation;
        final orientationStr = orientation == Orientation.portrait ? '竖屏' : '横屏';
        print('📐 屏幕方向：$orientationStr');

        // 4. 获取屏幕尺寸信息
        final screenSize = MediaQuery.of(context).size;
        print('🖥️ 屏幕尺寸：${screenSize.width} × ${screenSize.height}');

        // 5. 重写 MediaQuery 数据：固定文字缩放因子为1.0
        // 这样可以避免应用内文字随系统设置变化而过大或过小
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          child: widget!, // 使用 ! 确保 widget 不为 null
        );
      },
    );
  }
}

// 主页面组件
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 在页面中也可以直接使用 MediaQuery
    final mediaQuery = MediaQuery.of(context);
    
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前设备配置信息：',
              style: Theme.of(context).textTheme.headline6,
            ),
            const SizedBox(height: 20),
            
            // 显示屏幕尺寸
            Text(
              '屏幕尺寸：${mediaQuery.size.width.toStringAsFixed(1)} × ${mediaQuery.size.height.toStringAsFixed(1)}',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            
            // 显示当前主题模式
            Text(
              '主题模式：${mediaQuery.platformBrightness == Brightness.light ? '浅色' : '深色'}',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            
            // 显示字体缩放比例（已被我们固定为1.0）
            Text(
              '字体缩放：${mediaQuery.textScaleFactor}',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            
            // 显示屏幕方向
            Text(
              '屏幕方向：${mediaQuery.orientation == Orientation.portrait ? '竖屏' : '横屏'}',
              style: Theme.of(context).textTheme.bodyText1,
            ),
          ],
        ),
      ),
    );
  }
}

2. 页面级监听示例

除了在全局层面监听配置变化外，我们也可以在特定页面中进行局部监听：

class DeviceInfoPage extends StatelessWidget {
  const DeviceInfoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('设备信息')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 监听并显示像素密度
            Text('像素密度：${MediaQuery.of(context).devicePixelRatio}'),
            
            // 监听并显示安全区域
            Text('顶部安全区域：${MediaQuery.of(context).padding.top}'),
            Text('底部安全区域：${MediaQuery.of(context).padding.bottom}'),
            
            // 监听并显示文本方向
            Text('文本方向：${MediaQuery.of(context).textDirection}'),
          ],
        ),
      ),
    );
  }
}

MediaQuery 的工作原理

MediaQuery 采用了 Flutter 的 InheritedWidget 机制，它在 Widget 树中向下传递设备配置信息。当设备配置发生变化时，MediaQuery 会自动重建依赖它的 Widget。

关键方法和属性

MediaQuery.of(context)：获取当前上下文的 MediaQuery 数据
MediaQuery.data：包含所有设备配置信息的对象
MediaQuery.copyWith()：复制并修改 MediaQuery 数据
MediaQuery.removePadding()：移除特定方向的内边距

常见应用场景

固定字体大小：防止应用内文字随系统字体设置过大或过小
响应式布局：根据屏幕尺寸和方向调整布局
主题适配：根据系统主题模式切换应用样式
安全区域适配：处理刘海屏、底部导航栏等特殊区域
动态配置：根据设备特性调整应用行为

最佳实践

避免过度使用：只在真正需要时才使用 MediaQuery，过多的监听可能影响性能
合理缓存：对于不经常变化的值，可以考虑缓存以提高性能
全局统一处理：对于需要全局应用的配置（如固定字体大小），使用 MaterialApp 的 builder 属性
结合其他组件：与 LayoutBuilder、OrientationBuilder 等组件结合使用，实现更复杂的响应式布局
测试各种配置：在不同的设备配置下测试应用，确保良好的适配性

总结

MediaQuery 是 Flutter 中实现响应式设计和设备适配的强大工具。通过本文的介绍和示例，你应该已经掌握了如何使用 MediaQuery 监听设备配置的动态变化，并根据这些变化调整应用的行为和外观。

合理利用 MediaQuery 可以让你的 Flutter 应用在不同设备和配置下都能提供一致且良好的用户体验。

Flutter MediaQuery 详解：监听设备字体等配置动态变化

目录