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