flutter 屏幕适配分析(一)

图一:iphone参数

物理分辨率:硬件所支持的，即设备分辨率，常常听到的1920，2k屏,物理像素固定，出厂设置好了。
逻辑分辨率（手机屏幕大小）:软件通过算法达到的,flutter开发中我们用的就是这个逻辑分辨率。
像素比(dpr):物理像素与逻辑像素的比例,当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素（长2倍，宽2倍，乘起来就是4倍）显示1个逻辑像素

获取设备信息(通过MediaQuery)

图二:获取手机物理分辨率与逻辑分辨率

1. 报错分析：首先点击of方法进去
   MediaQueryData必须要初始化好,不然你拿到的就是null

   

   图三:of方法分析

2. 查看MediaQueryData具体是啥
   初始化MediaQueryData实际上不是用的构造器函数，而是用的MediaQueryData.formWindow方法

   

   图四:观察MediaQuery.jpg

3. 具体看看怎么初始化的

   

   图五:真正初始化的过程.jpg

   只有等这个方法初始化完后，才能调用MediaQuery.of(context),所以要求执行顺序必须是:图五→图一才行，而按照现在的代码顺序却是图一到图五了,所以报错。可以打断点验证整个过程

import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     //一般希望在应用程序启动就拿到手机的物理分辨率
     final physicalWidth=window.physicalSize.width;
     final physicalHeight=window.physicalSize.height;
     print("手机物理分辨率:$physicalWidth*$physicalHeight");

     //在这里通过媒体查询获取手机屏幕宽高(逻辑分辨率)会报错
      // final screenWidth=MediaQuery.of(context).size.width;
     // final screenHeight=MediaQuery.of(context).size.height;
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: "/", 
      routes: {
        "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
      },
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    //放这里不会报错，因为已经初始化完成
     final mediaQueryData=MediaQuery.of(context);
     print(mediaQueryData);
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Center(
          child: new Column(
            children: <Widget>[
              Text('测试'),
              ]
          ),
        ));
  }
}

如果要强行在刚刚报错的地方拿到屏幕宽高怎么办？

回头看源码，发现有这个代码:

size = window.physicalSize / window.devicePixelRatio

那么我们可以在报错的地方直接按照这个写法，跳过初始化的过程(此过程实际上就是用的也是window方法)。

解决方案:

     // 获取dpr
     final dpr=window.devicePixelRatio;
    // 通过仿照源码方式获取手机屏幕宽高(逻辑分辨率)
     final screenWidth= physicalWidth/dpr;
     final screenHeight= physicalHeight/dpr;
      // 同理也可以获取状态栏高度等其它参数
     final statusHeight=window.padding.top/dpr;