37 Flutter MediaQuery获取设备信息

最新推荐文章于 2026-05-15 05:49:55 发布

原创最新推荐文章于 2026-05-15 05:49:55 发布 · 612 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter

Flutter 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了Flutter中如何使用MediaQuery获取设备的屏幕尺寸、设备像素比、字体缩放比例等信息，并展示了如何根据这些信息调整布局。通过MediaQuery.of(context)可以获取到屏幕大小、边距等数据，进而实现响应式布局。同时，文章还给出了使用MediaQuery调整字体大小的示例代码，以及在不同场景下，如布局构建和系统字体变化时的应用。

Flutter MediaQuery获取设备信息

1.简介

获取屏幕宽度高度密度通知栏高度等屏幕信息,通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下：

2.属性

属性	说明
size	逻辑像素，并不是物理像素，类似于Android中的dp，逻辑像素会在不同大小的手机上显示的大小基本一样，物理像素 = size*devicePixelRatio。
devicePixelRatio	单位逻辑像素的物理像素数量，即设备像素比。
textScaleFactor	单位逻辑像素字体像素数，如果设置为1.5则比指定的字体大50%。
platformBrightness	当前设备的亮度模式，比如在Android Pie手机上进入省电模式，所有的App将会使用深色（dark）模式绘制。
viewInsets	被系统遮挡的部分，通常指键盘，弹出键盘，`viewInsets.bottom`表示键盘的高度。
padding	被系统遮挡的部分，通常指“刘海屏”或者系统状态栏。
viewPadding	被系统遮挡的部分，通常指“刘海屏”或者系统状态栏，此值独立于`padding`和`viewInsets`，它们的值从`MediaQuery`控件边界的边缘开始测量。在移动设备上，通常是全屏。
systemGestureInsets	显示屏边缘上系统“消耗”的区域输入事件，并阻止将这些事件传递给应用。比如在Android Q手势滑动用于页面导航（ios也一样），比如左滑退出当前页面。
physicalDepth	设备的最大深度，类似于三维空间的Z轴。
alwaysUse24HourFormat	是否是24小时制。
accessibleNavigation	用户是否使用诸如TalkBack或VoiceOver之类的辅助功能与应用程序进行交互，用于帮助视力有障碍的人进行使用。
invertColors	是否支持颜色反转。
highContrast	用户是否要求前景与背景之间的对比度高， iOS上，方法是通过“设置”->“辅助功能”->“增加对比度”。此标志仅在运行iOS 13的iOS设备上更新或以上。
disableAnimations	平台是否要求尽可能禁用或减少动画。
boldText	平台是否要求使用粗体。
orientation	是横屏还是竖屏。

3.如何使用

//屏幕大小
    Size mSize = MediaQuery.of(context).size;
    //密度
    double mRatio = MediaQuery.of(context).devicePixelRatio;
    //设备像素
    double width = mSize.width * mRatio;
    double height = mSize.height * mRatio;
 
    // 上下边距 （主要用于 刘海  和  内置导航键）
    double topPadding = MediaQuery.of(context).padding.top;
    double bottomPadding = MediaQuery.of(context).padding.bottom;
 
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;
    Brightness platformBrightness = MediaQuery.of(context).platformBrightness;
    EdgeInsets viewInsets = MediaQuery.of(context).viewInsets;
    EdgeInsets padding = MediaQuery.of(context).padding;
    bool alwaysUse24HourFormat = MediaQuery.of(context).alwaysUse24HourFormat;
    bool accessibleNavigation = MediaQuery.of(context).accessibleNavigation;
    bool invertColors = MediaQuery.of(context).invertColors;
    bool disableAnimations = MediaQuery.of(context).disableAnimations;
    bool boldText = MediaQuery.of(context).boldText;

4.使用场景

1.根据尺寸构建不同的布局

SafeArea控件就是通过MediaQuery.of来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的

var screenSize = MediaQuery.of(context).size;
if(screenSize.width>oneColumnLayout){
  //平板布局
}else{
  //手机布局
}

2.系统字体变化

很多App都有一个功能就是调节字体大小，通过MediaQuery来实现，实现如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(title: Text("flutter demo")),
            body: MediaQueryDemo()));
  }
}
class MediaQueryDemo extends StatefulWidget {
  MediaQueryDemo({Key key}) : super(key: key);

  @override
  _MediaQueryDemoState createState() {
    return _MediaQueryDemoState();
  }
}

class _MediaQueryDemoState extends State<MediaQueryDemo> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0);
    return Scaffold(
      appBar: AppBar(
        title: Text('老孟'),
      ),
      body: MediaQuery(
        data: _data,
        child: Text('字体变大'),
      ),
    );
  }
}