Flutter 媒体查询 MediaQuery

发布于 1周前 作者 itying888 最后一次编辑是 5天前 来自 Flutter

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}"),
      ],
    );
  }
}
回到顶部