Flutter屏幕适配

文章目录

一、Flutter单位
二、设备信息
三、常见适配方案
四、flutter_screenutil

一、Flutter单位

Flutter使用的是类似IOS中的点pt（point）。
iPhone6的尺寸是375x667，分辨率为750x1334。
iPhone6的dpr( devicePixelRatio ) 是2.0。

DPR = 物理像素 / 逻辑像素

二、设备信息

通过MediaQuery获取屏幕上的信息。

// 1. 媒体查询信息
final mediaQuery = MediaQuery.of(context);
// 2. 获取宽度和高度
final screenWidth = mediaQuery .size.width;
final screenHeight = mediaQuery .size.heigth;
// 3. 状态栏信息
final statusBarHeigth = mediaQuery .padding.top;
final bottomHeight =    mediaQuery .padding.bottom;

三、常见适配方案

rem
rem是给根标签( HTML标签 )设置一个字体大小，其他所有的单位都使用rem单位（相对于根标签)。
浏览器默认的font-size值为16px。
可以通过更改根元素的大小，调整所有字体大小。
vw、vh
vw和vh是将屏幕分成100等分，1个vw相当于是1%的大小。
基于视图窗口的单位。
- vmin: 选取vw和vh中最小的那个，在手机竖屏时，1vmin = 1vw
- vmax: 选取vw和vh中最大的那个，在手机竖屏时，1vmax = 1vh
rpx
rpx是小程序中适配的方案，将750px作为设计稿， 1rpx = 屏幕宽度/750

安全区域适配
在一些手机中，顶部有刘海、摄像头等，底部有话筒等，这些位置不能填充组件，有被阻挡的风险

全面屏适配

在页面中使用了 Scaffold 的 appBar 和 bottomNavigationBar，Scaffold 框架会自动按照全面屏的机制进行适配，不需要开发者进行手动配置。
如果页面中没有使用 Scaffold , 或者使用了 Scaffold没有使用appBar和bottomNavigationBar，这样顶部导航栏偏上，底部导航栏偏下，这里需要适配一下。可以使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding，然后进行适配。

四、flutter_screenutil

使用pub.dev上的第三方插件库flutter_screenutil实现屏幕的适配。
https://pub.dev/packages/flutter_screenutil

flutter_screenutil介绍
[图片]
flutter_screenutil库的功能

屏幕适配：flutter_screenutil可以根据设备的屏幕尺寸和密度，将设计稿上的尺寸转换为适合当前设备的实际尺寸。这样，无论是在小屏幕手机上还是在大屏幕平板电脑上运行应用，UI元素都能正确地适配屏幕。
尺寸适配：flutter_screenutil提供了setWidth()和setHeight()方法，通过传入设计稿上的尺寸，可以根据设备的屏幕宽度进行动态调整，返回适配后的实际宽度。
字体适配：flutter_screenutil提供了setSp()方法，可以根据设备的屏幕密度进行字体大小的适配。通过传入设计稿上的字体大小，可以根据当前设备的屏幕密度动态调整字体大小。

flutter_screenutil使用
[图片]

flutter packages get

flutter_screenutil api
[图片]

ScreenUtil.init( context, designSize:const Size(375,667));
ScreenUtil().setWidth(xxx);

常用的api

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配

// 简写方式
ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp