flutter 屏幕适配分析(一)

相关补充:

在flutter 应用中一般来说我们是没有用单位的,不像传统的开发用了px,rpx,pt,vw等等,但是在实际的开发过程中移动端不同的屏幕我们都需要做适配。在此，就引出三个概念：逻辑分辨率、物理分辨率与像素比。

获取设备信息(通过MediaQuery)

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

   
   

   

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

   
   

   

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

   

   
   只有等这个方法初始化完后，才能调用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;