Day16 - Flutter - 屏幕适配-阿里云开发者社区

Day16 - Flutter - 屏幕适配

2022-05-23 418

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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的ContainerContainer中有一段文字是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<JKMallContent> {
    @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),),
           )
        );
    }
}