Futter 屏幕适配框架flutter_ScreenUtil 用法
前言 :
各位同学大家好,大家在做app开发的时候都会遇到屏幕适配的问题,安卓里面有dp iOS里面有pt 单位给我们用来处理屏幕适配 除此之外安卓还有 autosize等框架给我们使用 ,iOS也对应屏幕适配方案给我们使用,那么在flutter 中我们可以使用 flutter_ScreenUtil 这个三方库来处理屏幕的适配,那么废话不多说 我们正式开始讲解使用方法。
准备工作:
需要安装flutter的开发环境:大家可以去看看之前的教程:
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程:https://www.jianshu.com/p/bad2c35b41e3
安装依赖:
dependencies:flutter:sdk: flutter# 添加依赖flutter_screenutil: ^3.1.0
请在pubspec.yaml 文件添加依赖 并在控制台输入flutter pub get 命令下载依赖
效果图:
大家可以看到我们使用 flutter_ScreenUtil 框架对我们的UI进行了适配以后 我们在不通的分辨率设备 安卓模拟器和 iOS 模拟器上面显示效果几乎是差不多的 这样我们就可以很好的让我们开发的app在不同的设备得到相同的使用体验了。
具体实现:
一般在我们正式开发当中 UI设计那边会给出标注图给我们 一般是按照某一个分辨率下面做的表示 例如(1080X1920 或者是 750*1334 之类的 )我们这边拿到UI标注主体要选择web px像素做单位的视图
然后再来使用我们的flutter_ScreenUtil 做屏幕适配:
在每个使用的地方导入包:
import 'package:flutter_screenutil/flutter_screenutil.dart';
##属性:
初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置(即入口文件,只需设置一次),以保证在每次使用之前设置好了适配尺寸:
//填入设计稿中设备的屏幕尺寸
void main() {WidgetsFlutterBinding.ensureInitialized();//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)ScreenUtil.init(context,designSize: Size(750, 1334), allowFontScaling: false);runApp(MyApp());
}
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.init(context);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.init(context, designSize: Size(750, 1334));
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: true);
API
传入设计稿的px尺寸 px px px !ScreenUtil().setWidth(540) (sdk>=2.6 : 540.w) //根据屏幕宽度适配尺寸ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h) //根据屏幕高度适配尺寸ScreenUtil().setSp(24) (sdk>=2.6 : 24.sp) //适配字体ScreenUtil().setSp(24, allowFontScalingSelf: true) (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)ScreenUtil().setSp(24, allowFontScalingSelf: false) (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)ScreenUtil().pixelRatio //设备的像素密度ScreenUtil().screenWidth (sdk>=2.6 : 1.sw) //设备宽度ScreenUtil().screenHeight (sdk>=2.6 : 1.sh) //设备高度ScreenUtil().bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的ScreenUtil().statusBarHeight //状态栏高度 刘海屏会更高 单位dpScreenUtil().textScaleFactor //系统字体缩放比例ScreenUtil().scaleWidth // 实际宽度的dp与设计稿px的比例ScreenUtil().scaleHeight // 实际高度的dp与设计稿px的比例0.2.sw //屏幕宽度的0.2倍0.5.sh //屏幕高度的50%
具体使用:
void printScreenInformation() {print('设备宽度:${ScreenUtil().screenWidth}'); //Device widthprint('设备高度:${ScreenUtil().screenHeight}'); //Device heightprint('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel densityprint('底部安全区距离:${ScreenUtil().bottomBarHeight}dp',); //Bottom safe zone distance,suitable for buttons with full screenprint('状态栏高度:${ScreenUtil().statusBarHeight}dp',); //Status bar height , Notch will be higher Unit pxprint('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}',);print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}',);print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}');print('屏幕宽度的0.5:${0.5.sw}');print('屏幕高度的0.5:${0.5.sh}');}
适配尺寸
传入设计稿的px尺寸:
根据屏幕宽度适配 width: ScreenUtil().setWidth(540),
根据屏幕高度适配 height: ScreenUtil().setHeight(200),
Container(padding: EdgeInsets.all(ScreenUtil().setWidth(10)),width: ScreenUtil().setWidth(375),height: ScreenUtil().setHeight(200),color: Colors.red,child: Text('我的宽度:${0.5.sw}dp \n''我的高度:${ScreenUtil().setHeight(200)}dp',style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24)),),),
如果你的dart sdk>=2.6,可以使用扩展函数: example: 不用这个:
Container(
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
)
而是用这个:
Container(
width: 50.w,
height:200.h
)
适配字体:
传入设计稿的px尺寸:
//传入字体大小,默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil().setSp(28)
或
28.sp (dart sdk>=2.6)
//传入字体大小,根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
或
24.ssp (dart sdk>=2.6)
//for example:
Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: ScreenUtil().setSp(24),)),Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: ScreenUtil().setSp(24, allowFontScalingSelf: true))),],)
完整代码:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
/**** 创建人:xuqing* 创建时间:2020年11月25日19:22:16* 类说明:屏幕适配测试类**/
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter_ScreenUtil',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(),);}
}
class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 此处假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)ScreenUtil.init(context, designSize: Size(750, 1334), allowFontScaling: false);return ExampleWidget(title: 'FlutterScreenUtil 示例');}
}
class ExampleWidget extends StatefulWidget {const ExampleWidget({Key key, this.title}) : super(key: key);final String title;@override_ExampleWidgetState createState() => _ExampleWidgetState();
}
class _ExampleWidgetState extends State<ExampleWidget> {@overrideWidget build(BuildContext context) {printScreenInformation();return Scaffold(appBar: AppBar(title: Text(widget.title),),body: SingleChildScrollView(child: Column(crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Row(children: <Widget>[Container(padding: EdgeInsets.all(ScreenUtil().setWidth(10)),width: ScreenUtil().setWidth(375),height: ScreenUtil().setHeight(200),color: Colors.red,child: Text('我的宽度:${0.5.sw}dp \n''我的高度:${ScreenUtil().setHeight(200)}dp',style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24)),),),Container(padding: EdgeInsets.all(ScreenUtil().setWidth(10)),width: 375.w,height: 200.h,color: Colors.blue,child: Text('我的宽度:${375.w}dp \n''我的高度:${200.h}dp',style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(24))),),],),Text('设备宽度:${ScreenUtil().screenWidthPx}px'),Text('设备高度:${ScreenUtil().screenHeightPx}px'),Text('设备宽度:${ScreenUtil().screenWidth}dp'),Text('设备高度:${ScreenUtil().screenHeight}dp'),Text('设备的像素密度:${ScreenUtil().pixelRatio}'),Text('底部安全区距离:${ScreenUtil().bottomBarHeight}dp'),Text('状态栏高度:${ScreenUtil().statusBarHeight}dp'),Text('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}',textAlign: TextAlign.center,),Text('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}',textAlign: TextAlign.center,),SizedBox(height: 100.h,),Text('系统的字体缩放比例:${ScreenUtil().textScaleFactor}'),Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: 24.sp,),),Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: 24.ssp,),),],)],),),floatingActionButton: FloatingActionButton(child: Icon(Icons.title),onPressed: () {ScreenUtil.init(context,designSize: Size(750, 1334),allowFontScaling: false,);setState(() {});},),);}void printScreenInformation() {print('设备宽度:${ScreenUtil().screenWidth}'); //Device widthprint('设备高度:${ScreenUtil().screenHeight}'); //Device heightprint('设备的像素密度:${ScreenUtil().pixelRatio}'); //Device pixel densityprint('底部安全区距离:${ScreenUtil().bottomBarHeight}dp',); //Bottom safe zone distance,suitable for buttons with full screenprint('状态栏高度:${ScreenUtil().statusBarHeight}dp',); //Status bar height , Notch will be higher Unit pxprint('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}',);print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}',);print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}');print('屏幕宽度的0.5:${0.5.sw}');print('屏幕高度的0.5:${0.5.sh}');}
}
到此flutter屏幕适配三方库 flutter_screenutil 的使用我们就讲完了
最后总结:
对比原生而言flutter的屏幕适配方案使用 flutter_screenutil 三方库就比较容易实现 不过我们注意的是虽然我们做出来的是app但是我们使用的尺寸单位还是px 和web是一样的 这点们要注意,以上的简单例子只是分享给同学们 ,如果有其他更好屏幕适配方案同学们可以自己私下研究,我这边就不展开讲了。 最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦 也可以加我个人QQ/微信(1693891473)
项目地址:
码云:https://gitee.com/qiuyu123/flutterscreenutil
QQ 交流群:
Futter 屏幕适配框架flutter_ScreenUtil 用法相关推荐
- Android屏幕适配框架-(今日头条终极适配方案)
2019独角兽企业重金招聘Python工程师标准>>> 在Android开发中,屏幕适配是一个非常头痛的问题,因而为了去进行屏幕适配,作为程序员,是呕心沥血,历经磨难,哈哈 我们之前 ...
- android 屏幕适配框架,Android屏幕适配
为什么要进行Android屏幕适配 由于Android系统的开放性,任何用户.开发者.OEM厂商.运营商都可以对Android进行定制,于是导致: 1.Android系统碎片化:小米定制的MIUI.魅 ...
- android ui布局适配,Android适配全面总结(一)----屏幕适配
前言 Android适配是一个老生常谈的问题,很多程序员觉得很恶心,不愿意做适配,但是又不得不做.然后老板说,这位兄弟,做好了,今天晚饭给你加个鸡腿,然后程序员开始找各种资料,忙活起来了,最终在苦逼的 ...
- Android适配全面总结(一)----屏幕适配
版权声明:本文为博主原创文章(部分引用他人博文,已加上引用说明),未经博主允许不得转载.https://www.jianshu.com/p/7aa34434ad4d 转载请标明出处: https:// ...
- Android不同屏幕适配的大神解决方案(转)
在CSDN社区逛了这么多年,从中也学习了很多,但是一直没有时间自己写博客(其实是因为太菜,滑稽),这也是我第一次转载大神的文章,不是很会弄,所以里面的内容和链接全是用的原作者的,也没有经过精简和编辑, ...
- 今日头条适配方案_煮酒论英雄之屏幕适配
作者:JessYan 地址:https://www.jianshu.com/p/55e0fca23b4f1 前言 这个月在 Android 技术圈中 屏幕适配 这个词曝光率挺高的,为什么这么说呢?因为 ...
- Android屏幕适配AndroidAutoSize的使用
Android屏幕适配AndroidAutoSize的使用 AndroidAutoSize的使用 加入依赖 配置AndroidManifest.xml主单位或者副单位 主单位的配置 副单位的配置 初始 ...
- android屏幕适配的目的,剖析Android屏幕适配及各方案
最近陆陆续续被一些android屏幕适配的文章刷屏了,我发现有些问题在看别人写的文章时候还是比较不容易理解的,在这里我们把这些东西捋一捋,来讲讲android屏幕适配的原理,还有之前用过的屏幕适配框架 ...
- 今日头条屏幕适配方案终极版正式发布!
原文地址: juejin.im/post/5bce68- 以下是 骚年你的屏幕适配方式该升级了! 系列文章,欢迎转发以及分享: 骚年你的屏幕适配方式该升级了!(一)-今日头条适配方案 骚年你的屏幕适配 ...
最新文章
- 聚类算法api初步使用
- 解读:spring-boot logging。记一次Logback在spring-boot中的使用方法
- 处理外部信息(xml,html,js,shareObject)
- 推荐一款功能强大的Tomcat 管理监控工具,可替代Tomcat Manager
- CMOS图像传感器——高动态范围
- 【图像处理】——比特平面原理和实现方法(全网较全面,含所有比特位图的分层方法)
- ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
- 飞鸽传书也具有五华石乡特色
- Shader Model 版本与DirectX的关系(OpenGL对应的呢?)
- php颜色淡入代码,JavaScript_jquery 淡入淡出效果的简单实现,样式:复制代码 代码如下:nbsp - phpStudy...
- Pycharm使用---Black代码格式化工具
- 干货分享:给视频翻译字幕可以用哪些软件?
- 经典的战略管理和营销管理书《定位》
- 颜色模式,tiff,rgb2cmyk
- 古时候的汉法,现代社会的红光光浴-种光光学
- WIN11添加我的电脑图标等的方法
- Photoshop如何使用图像调色之实例演示?
- 喧喧发布 2.5.4 版本,新增客户端界面缩放等功能
- 定理在数学中的简写形式_高中数学联赛常用定理
- 网络中数据传输过程的解析
热门文章
- GAN(Generative Adversarial Nets (生成对抗网络))
- 图像处理函数——mat2gray、imclose、imopen、imerode
- c++打擂台——冰壶游戏
- 低血糖怎样正确进行调理?
- leecode#1051【数组】:高度检查器
- php mysql笔试题_初级PHP程序员笔试题
- android渐变切换图片
- 杭电计算机专业认可度,杭州电子科技大学每年的录取分数高不高?杭电的社会认可度怎么样?...
- 如何使用预览将多个图像转换为单个PDF
- java常量能改变值吗_java中的常量和变量