Flutter 媒体查询 MediaQuery
Flutter 媒体查询 MediaQuery参考:http://bbs.itying.com/topic/666fe4623aacd1002c0a5f0b
Flutter+Getx仿小米实战系列教程:https://www.itying.com/category-88-b0.html
flutter提供了MediaQuery.of(context)对象进行媒体查询, 具体使用方法查考下述例程 下面例子展示了Flutter 媒体查询 MediaQuery的使用
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Device Info'),
),
body: FirstWidget(),
),
);
}
}
class FirstWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).size}"),//Size类型
Text("设备像素逻辑像素sp大小:${MediaQuery.of(context).padding}"),
Text("每个逻辑像素的设备像素数:${MediaQuery.of(context).devicePixelRatio}"),
Text("每个逻辑像素的字体像素数:${MediaQuery.of(context).textScaleFactor}"),
Text("格式化时间时是否使用24小时格式:${MediaQuery.of(context).alwaysUse24HourFormat}"),
Text("是横屏还是竖屏:${MediaQuery.of(context).orientation}"),
Text("设备的亮度模式:${MediaQuery.of(context).platformBrightness}"),
Text("被系统遮挡的部分(通常指键盘):${MediaQuery.of(context).viewInsets}"),
Text("被系统遮挡的部分(常指“刘海屏”或系统状态栏):${MediaQuery.of(context).padding}"),
Text("当前窗口的宽度和高度:${MediaQuery.of(context).systemGestureInsets}"),
Text("当前窗口的宽度和高度:${MediaQuery.of(context).textScaleFactor}"),
],
);
}
}