一、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 )， 否则可能显示为长方形。
