Flutter屏幕适配_flutter 屏幕适配

一、Flutter单位

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

DPR = 物理像素 / 逻辑像素
1

二、设备信息

通过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;
1
2
3
4
5
6
7
8

三、常见适配方案

1. rem
   rem是给根标签( HTML标签 )设置一个字体大小，其他所有的单位都使用rem单位（相对于根标签)。
   浏览器默认的font-size值为16px。
   可以通过更改根元素的大小，调整所有字体大小。

2. vw、vh
   vw和vh是将屏幕分成100等分，1个vw相当于是1%的大小。
   基于视图窗口的单位。

   • vmin: 选取vw和vh中最小的那个，在手机竖屏时，1vmin = 1vw
   • vmax: 选取vw和vh中最大的那个，在手机竖屏时，1vmax = 1vh

3. 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);
1
2

常用的api

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

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

一般情况下1.w != 1.h，除非刚好屏幕分辨率比例与设计图比例一致。如果要设置为正方形，要使用相同的单位( 同为w或者同为h )， 否则可能显示为长方形。