width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
),
适配字体:
ScreenUtil().setSp(28) //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放
ScreenUtil().setSp(28，false) //传入字体大小，不会根据系统的“字体大小”辅助选项来进行缩放
for example:
Text(
‘My font size is 28px and will not change with the system.’,
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(28, false)
)
),
其他相关api：
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离，适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例
//导入
import ‘package:flutter_screenutil/flutter_screenutil.dart’;
…
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width:
750, height: 1334)…init(context);
print(‘设备宽度:ScreenUtil.screenWidth′);//Devicewidthprint(′设备高度:{ScreenUtil.screenWidth}'); //Device width print('设备高度:ScreenUtil.screenWidth′);//Devicewidthprint(′设备高度:{ScreenUtil.screenHeight}’); //Device height
print(‘设备的像素密度:ScreenUtil.pixelRatio′);//Devicepixeldensityprint(′底部安全区距离:{ScreenUtil.pixelRatio}'); //Device pixel density print( '底部安全区距离:ScreenUtil.pixelRatio′);//Devicepixeldensityprint(′底部安全区距离:{ScreenUtil.bottomBarHeight}’); //Bottom safe zone distance，suitable for buttons with full screen
print(
‘状态栏高度:${ScreenUtil.statusBarHeight}px’); //Status bar height , Notch will be higher Unit px
print(‘实际宽度的dp与设计稿px的比例:ScreenUtil().scaleWidth′);print(′实际高度的dp与设计稿px的比例:{ScreenUtil().scaleWidth}'); print('实际高度的dp与设计稿px的比例:ScreenUtil().scaleWidth′);print(′实际高度的dp与设计稿px的比例:{ScreenUtil().scaleHeight}’);
print(
‘宽度和字体相对于设计稿放大的比例:ScreenUtil().scaleWidth∗ScreenUtil.pixelRatio′);print(′高度相对于设计稿放大的比例:{ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); print( '高度相对于设计稿放大的比例:ScreenUtil().scaleWidth∗ScreenUtil.pixelRatio′);print(′高度相对于设计稿放大的比例:{ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}’);
print(‘系统的字体缩放比例:${ScreenUtil.textScaleFactory}’);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
‘我的宽度:ScreenUtil().setWidth(375)dp′,style:TextStyle(color:Colors.white,fontSize:ScreenUtil().setSp(12,false),),),),Container(width:ScreenUtil().setWidth(375),height:ScreenUtil().setHeight(200),color:Colors.blue,child:Text(′我的宽度:{ScreenUtil().setWidth(375)}dp', style: TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(12, false), ), ), ), Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), color: Colors.blue, child: Text('我的宽度:ScreenUtil().setWidth(375)dp′,style:TextStyle(color:Colors.white,fontSize:ScreenUtil().setSp(12,false),),),),Container(width:ScreenUtil().setWidth(375),height:ScreenUtil().setHeight(200),color:Colors.blue,child:Text(′我的宽度:{ScreenUtil().setWidth(375)}dp’,
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(12, false),
)),
),
],
),
Text(‘设备宽度:ScreenUtil.screenWidthpx′),Text(′设备高度:{ScreenUtil.screenWidth}px'), Text('设备高度:ScreenUtil.screenWidthpx′),Text(′设备高度:{ScreenUtil.screenHeight}px’),
Text(‘设备的像素密度:ScreenUtil.pixelRatio′),Text(′底部安全区距离:{ScreenUtil.pixelRatio}'), Text('底部安全区距离:ScreenUtil.pixelRatio′),Text(′底部安全区距离:{ScreenUtil.bottomBarHeight}px’),
Text(‘状态栏高度:ScreenUtil.statusBarHeightpx′),Text(′实际高度的dp与设计稿px的比例:{ScreenUtil.statusBarHeight}px'), Text( '实际高度的dp与设计稿px的比例:ScreenUtil.statusBarHeightpx′),Text(′实际高度的dp与设计稿px的比例:{ScreenUtil().scaleHeight}’,
textAlign: TextAlign.center,
),
Text(
‘实际高度的dp与设计稿px的比例:ScreenUtil().scaleHeight′,textAlign:TextAlign.center,),Text(′宽度和字体相对于设计稿放大的比例:{ScreenUtil().scaleHeight}', textAlign: TextAlign.center, ), Text( '宽度和字体相对于设计稿放大的比例:ScreenUtil().scaleHeight′,textAlign:TextAlign.center,),Text(′宽度和字体相对于设计稿放大的比例:{ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}’,
textAlign: TextAlign.center,
),
Text(
‘高度相对于设计稿放大的比例:ScreenUtil().scaleHeight∗ScreenUtil.pixelRatio′,textAlign:TextAlign.center,),SizedBox(height:ScreenUtil().setHeight(100),),Text(′系统的字体缩放比例:{ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}', textAlign: TextAlign.center, ), SizedBox( height: ScreenUtil().setHeight(100), ), Text('系统的字体缩放比例:ScreenUtil().scaleHeight∗ScreenUtil.pixelRatio′,textAlign:TextAlign.center,),SizedBox(height:ScreenUtil().setHeight(100),),Text(′系统的字体缩放比例:{ScreenUtil.textScaleFactory}’),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(‘我的文字大小在设计稿上是14px，不会随着系统的文字缩放比例变化’,
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text(‘我的文字大小在设计稿上是14px，会随着系统的文字缩放比例变化’,
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
],
),
),
);
}
使用示例:
example demo
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MP5ryYtF-1647528567354)(https://user-gold-cdn.xitu.io//10/18/16685970a9b3aa34?imageView2/0/w/1280/h/960/ignore-error/1)]
适配原理
说一下适配方案, 比如我们设计师设计的UI是根据Iphone6来做的,我们知道 iPhone6的分辨率是750*1334(px), 又或者是根据hdpi的设备来设计的UI,我们知道hdpi的 Android设备是 (240 dpi),像素密度是1.5,即hdpi设备的分辨率宽度是320px, 总之,无论设计稿的单位是px,或者是dp,我们都能够转换成px. 那么我们如果根据px来适配,ios和 android 就都可以兼容了.
假设,我们的设计稿手机是1080_1920 px. 设计稿上有一个540_960 的组件, 即宽度和宽度是手机的一半. 如果我们直接写的时候组件的尺寸这么定义,在其他尺寸的设备上未必是一半,或多,或少. 但是我们可以按比例来看,即我们要实现的宽度是实际设备的一半. 那么假设我们设备的宽度是deviceWidth和deviceHeight , 我们要写的组件大小为: 宽:(540/1080)*deviceWidth,高度: (960/1920)*deviceHeight.
通过这个公式我们可以发现,我们要写的组件宽度就是设计稿上的尺寸width*(deviceWdith/原型设备宽度).那么每次我们写ui的时候,只要直接哪来设计稿的尺寸*(deviceWdith/设备原型)宽度即可.
原理就是先获取,实际设备与原型设备的尺寸比例. 首先flutter获取设备的尺寸的代码是:
以下数据为我的手机数据:
最后
这里我希望可以帮助到大家提升进阶。
内容包含：Android学习PDF+架构视频+面试文档+源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。
喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~
一下呗~
