MediaQuery
MediaQueryData常用属性如下
| 属性 | 说明 |
|---|---|
size |
用逻辑像素表示的屏幕宽度和高度对象，单位是dp（乘以密度就是你设备的像素） |
devicePixelRatio |
密度（像素比），每一个逻辑像素点对应的物理像素点个数 |
textScaleFactor |
显示文字时，每一个逻辑像素对应的字体像素，如果设置为1.5则比指定的字体大50%。 |
platformBrightness |
当前设备的亮度模式，比如在Android Pie手机上进入省电模式，所有的App将会使用深色（dark）模式绘制。 |
viewInsets |
被系统遮挡的部分，通常指键盘，弹出键盘，viewInsets.bottom表示键盘的高度 |
padding |
被系统遮挡的部分，通常指“刘海屏”或者系统状态栏 |
alwaysUse24HourFormat |
格式化时间时是否使用24小时格式 |
accessibleNavigation |
用户是否使用TalkBack或VoiceOver等辅助功能服务与应用程序进行交互 |
invertColors |
设备是否反转平台的颜色 |
disableAnimations |
平台是否要求尽可能禁用或减少动画 |
boldText |
平台是否请求使用粗体字体重绘制文本 |
orientation |
是横屏还是竖屏 |
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'dart:ui' as ui show window;
class SQScreen {
static double get width {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.size.width;
}
static double get height {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.size.height;
}
static double get scale {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.devicePixelRatio;
}
static double get textScaleFactor {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.textScaleFactor;
}
static double get navigationBarHeight {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
// mediaQuery.padding.top 屏幕上部被系统UI遮挡的部分的逻辑高度
// kToolbarHeight 这是一个常量 顶部navigationBar的高度
return mediaQuery.padding.top + kToolbarHeight;
}
static double get topSafeHeight {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.padding.top;
}
static double get bottomSafeHeight {
MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
return mediaQuery.padding.bottom;
}
}
-
基本用法：
var data = MediaQuery.of(context); -
MediaQueryData方法介绍
| 方法 | 说明 |
|---|---|
copyWith |
拷贝此MediaQueryData对象，创建一个副本，但将新字段替换为传入的给定字段 |
removePadding |
创建此 MediaQueryData 的副本，但将给定的填充替换为零 |
removeViewInsets |
创建此 MediaQueryData 的副本，但将给定的viewInsets 替换为零 |
备注：
Flutter中控件的高宽和字体大小时，使用的是逻辑像素，并非是实际的物理像素
SafeArea
SafeArea控件就是通过MediaQuery.of来实现的
根据尺寸构建不同的布局
var screenSize = MediaQuery.of(context).size;
// 这里 oneColumnLayout 表示一列布局的宽度
if(screenSize.width > oneColumnLayout) {
// 平板布局
} else {
// 手机布局
}
调节字体大小
@override
Widget build(BuildContext context) {
var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0);
return Scaffold(
body: MediaQuery(
data: _data,
child: Text('字体变大'),
),
);
}
发表评论