Day16 - Flutter - 屏幕适配

概述

• Flutter单位
• 适配方案

一、Flutter单位

• 1.1、Flutter中的单位
  在进行Flutter开发时，我们通常不需要传入尺寸的单位，那么Flutter使用的是什么单位呢？
  Flutter使用的是类似于iOS中的点pt，也就是 point。
  所以我们经常说iPhone6的尺寸是375x667，但是它的分辨率其实是750x1334。
  因为iPhone6的dpr（devicePixelRatio）是2.0，iPhone 6plus的dpr是3.0

  苹果的屏幕尺寸

  在Flutter开发中，我们使用的是对应的 屏幕物理尺寸

• 1.2. Flutter设备信息
  获取屏幕上的一些信息，可以通过MediaQuery，前提是MediaQuery已经初始化

  // 1.媒体查询信息
  final mediaQueryData = MediaQuery.of(context);
  
  // 2.获取宽度和高度
  final screenWidth = mediaQueryData.size.width;
  final screenHeight = mediaQueryData.size.height;
  final physicalWidth = window.physicalSize.width;
  final physicalHeight = window.physicalSize.height;
  final dpr = window.devicePixelRatio;
  print("屏幕width:$screenWidth height:$screenHeight");
  print("分辨率: $physicalWidth - $physicalHeight");
  print("dpr: $dpr");
  
  // 3.状态栏的高度
  // 有刘海的屏幕:44 没有刘海的屏幕为20
  final statusBarHeight = mediaQueryData.padding.top;
  // 有刘海的屏幕:34 没有刘海的屏幕0
  final bottomHeight = mediaQueryData.padding.bottom;
  print("状态栏height: $statusBarHeight 底部高度:$bottomHeight");
  

  提示:如下代码，因为我们想在MyApp的build拿到设备信息，那么我们就不能用 MediaQuery 了，我么就需要用 window，因为 MediaQuery 的本质也是用的 window，在下面会详细的陈述

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
         // 这里是拿不到 MediaQuery 信息的
         return MaterialApp(
             // 启动要显示的界面
             home: HomePage(),
         );
      }
  }
  
  class HomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
         // 这里 可以 拿不到 MediaQuery 信息
         return Container();
      }
  } 
  

  • 获取一些设备相关的信息，可以使用官方提供的一个库device_info

    dependencies:
         device_info: ^0.4.2+4
    

二、适配方案

• 2.1. 适配概述
  假如我们有下面这样一段代码：
  在屏幕中间显示一个200*200的Container
  Container中有一段文字是30

  class HYHomePage extends StatelessWidget {
    @override
     Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
             title: Text("首页"),
          ),
          body: Center(
             child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
                alignment: Alignment.center,
                child: Text("Hello World", style: TextStyle(fontSize: 30, color: Colors.white),),
             ),
          ),
     );
  }
  

  上面的代码在不同屏幕上会有不同的表现：1、很明显，如果按照上面的规则，在iPhone5上面，尺寸过大，在iPhone6plus上面尺寸过小；2、在开发中，我们应该可以根据不同的屏幕来完成尺寸的缩放

  • 在前端开发中，针对不同的屏幕常见的适配方案有下面几种

    • 1>、rem：
      • rem是给根标签（HTML标签）设置一个字体大小；
      • 但是不同的屏幕要动画设置不同的字体大小（可以通过媒体查询，也可以通过js动态计算）；
      • 其它所有的单位都使用rem单位（相对于根标签）；
    • 2>、vw、wh：
      • vw和vh是将屏幕（视口）分成100等份，一个1vw相当于是1%的大小；
      • 其它所有的单位都使用vw或wh单位；
    • 3>、rpx：
      • rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750；
      • 其它所有的单位都使用rpx单位；

    这里我们采用小程序的 rpx 来完成Flutter的适配

• 2.2、rpx适配，小程序中rpx的原理如下
  不管是什么屏幕，统一分成750份
  在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px
  在iPhone6上：1rpx = 375/750 = 0.5px
  在iPhone6plus上：1rpx = 414/750 = 0.552px

  • 那么我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可：

    • 比如100px的宽度：100 * 2 * rpx
    • 在iPhone5上计算出的结果是84px
    • 在iPhone6上计算出的结果是100px
    • 在iPhone6plus上计算出的结果是110.4px

  • 我们自己来封装一个工具类：JKSizeFit，也可以传入一个可选的参数，以什么尺寸作为设计稿

    import 'dart:ui';
    
    import 'package:flutter/material.dart';
    
    class JKSizeFit {
       // 分辨率的宽度
       static double physicalWith;
       // 分辨率的宽度
       static double physicalHeight;
    
       // 获取 dpr 倍率 @1x @2x @3x
       static double dpr;
    
       // 屏幕的宽度和高度
       static double screenWidth;
       static double screenHeight;
    
       // 状态栏的高度
       // 顶部状态栏的高度，有刘海的44，没有刘海的20
       static double topStatusHeight;
       // 导航栏的高度
       static double navigationBarHeight;
       // 底部的高度，有刘海的34，没有刘海的0
       static double bottomHeight;
       // 底部tabbar的高度
       static double bottomTabBarHeight;
    
       // rpx 和 px
       static double rpx;
       static double px;
    
       // 判断是手机是不是 iphoneX
       static bool isIphoneX;
    
       // 模仿小程序以 6s 宽度的 750 分辨率为适配基点，分成750份
       static void initialze({double standarSize = 750}) {
    
           // 1.手机物理分辨率
           physicalWith = window.physicalSize.width;
           physicalHeight = window.physicalSize.height;
    
           // 2.获取 dpr 倍率 @1x @2x @3x
           dpr = window.devicePixelRatio;
    
           // 3.屏幕的宽度和高度
           screenWidth = physicalWith / dpr;
           screenHeight = physicalHeight / dpr;
    
           // 4.状态栏的高度
           topStatusHeight = window.padding.top / dpr;
           navigationBarHeight = topStatusHeight + 44;
           bottomHeight = window.padding.bottom / dpr;
           bottomTabBarHeight = bottomHeight + 49;
    
           // 5.rpx 和 px
           rpx = screenWidth / standarSize;
           px = screenWidth / standarSize * 2;
    
           // 6.判断是不是iphoneX
           isIphoneX = topStatusHeight > 20 ? true : false;
    
       }
    
       static double setRpx(double size) {
           return rpx * size;
       }
    
       static double setPx(double size) {
           return px * size;
       }
    }
    
    extension DoubleFit on double {
    
       double get px {
           return JKSizeFit.setPx(this);
       }
    
       double get rpx {
           return JKSizeFit.setRpx(this);
       }
    }
    
    extension IntFit on int {
    
       double get px {
          return JKSizeFit.setPx(this.toDouble());
       }
    
       double get rpx {
          return JKSizeFit.setRpx(this.toDouble());
       }
    }
    

  • 初始化JKSizeFit类的属性，任意位置都可以，建议放到MaterialApp之前的位置

    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
             // 初始化适配器
            JKSizeFit.initialze();
    
            return MaterialApp();
        }
    }
    

  • 使用rpx 封装的 JKSizeFit 来完成屏幕适配：

    class JKMallContent extends StatefulWidget {
         @override
        _JKMallContentState createState() => _JKMallContentState();
    }
    
    class _JKMallContentState extends State {
        @override
        Widget build(BuildContext context) {
            return Center(
               child: Container(
                  alignment: Alignment.center,
                 color: Colors.brown,
                 width: 200.px,
                 height: 400.rpx,
                 child: Text('诗集', style: TextStyle(fontSize: 30.px, color: Colors.green),),
               )
            );
        }
    }
    

    我们来看一下实现效果：

    JKSizeFit适配效果

• 2.3、屏幕适配也可以使用第三方库：flutter_screenutil