美文网首页
flutter屏幕适配插件flutter_ScreenUtil的

flutter屏幕适配插件flutter_ScreenUtil的

作者: 不泯iOS | 来源:发表于2019-12-27 15:06 被阅读0次

使用注意点:
在使用之前根据设计稿尺寸,传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置(即入口文件,只需设置一次),以保证在每次使用之前设置好了适配尺寸。初始化的方式举例:

//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

使用方法:
1.再pubspec.ymal文件添加依赖,添加前查看最新版本

# 添加依赖
flutter_screenutil: ^0.7.0

2.在需要使用的地方(一般是主入口文件中)导入import 'package:flutter_screenutil/flutter_screenutil.dart';
3.初始化的三种方式:

//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

4.使用:

print('设备宽度:${ScreenUtil.screenWidth}'); //Device width                                                                
print('设备高度:${ScreenUtil.screenHeight}'); //Device height                                                              
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density                                                      
print('底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen      
print('状态栏高度:${ScreenUtil.statusBarHeight}px');                                                                        
print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}');                                                      
print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}');                                                     
print( '宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');                             
print( '高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');                               
print('系统的字体缩放比例:${ScreenUtil.textScaleFactor}');                                                                      

相关文章

网友评论

      本文标题:flutter屏幕适配插件flutter_ScreenUtil的

      本文链接:https://www.haomeiwen.com/subject/rbhdoctx.html