Flutter 移动端屏幕适配方案和制作
flutter_screenutil插件
flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局!
注意:此插件仍处于开发阶段,某些API可能尚未推出。
安装依赖:
安装之前请查看最新版本
# 添加依赖flutter_screenutil: ^0.5.3
在每个使用的地方导入包:
import 'package:flutter_screenutil/flutter_screenutil.dart';
属性
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | double | 1080px | 设计稿中设备的宽度,单位px |
height | double | 1920px | 设计稿中设备的高度,单位px |
allowFontScaling | bool | false | 设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放 |
初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置(即入口文件,只需设置一次),以保证在每次使用之前设置好了适配尺寸:
//填入设计稿中设备的屏幕尺寸//默认 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);
使用:
适配尺寸:
传入设计稿的px尺寸:
根据屏幕宽度适配 width: ScreenUtil.getInstance().setWidth(540)
,
根据屏幕高度适配 height: ScreenUtil.getInstance().setHeight(200)
,
也可以使用 ScreenUtil()
替代 ScreenUtil.getInstance()
, 例如:ScreenUtil().setHeight(200)
注意
高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的高度与实际中显示一样时使用.
//初始化设计尺寸 ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);print('设备的像素密度:${ScreenUtil.pixelRatio}'); print('设备的高:${ScreenUtil.screenHeight}'); print('设备的宽:${ScreenUtil.screenWidth}');
适配字体:
传入设计稿的px尺寸:
//传入字体大小,默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling) ScreenUtil.getInstance().setSp(28) //传入字体大小,根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置) ScreenUtil(allowFontScaling: true).setSp(28) //for example: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text('我的文字大小在设计稿上是25px,不会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),Text('我的文字大小在设计稿上是25px,会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),],)
其他相关api:
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例
完整demo示例代码:
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {// This widget is the root of your application. @overrideWidget build(BuildContext context) {return new MaterialApp(debugShowCheckedModeBanner: false,title: 'Flutter_ScreenUtil',theme: new ThemeData(primarySwatch: Colors.blue,),home: new MyHomePage(title: 'FlutterScreenUtil Demo'),);} }class MyHomePage extends StatefulWidget {MyHomePage({Key key, this.title}) : super(key: key);final String title;@override_MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);print('设备宽度:${ScreenUtil.screenWidth}'); //Device widthprint('设备高度:${ScreenUtil.screenHeight}'); //Device heightprint('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density print('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'); //Bottom safe zone distance,suitable for buttons with full screen print('状态栏高度:${ScreenUtil.statusBarHeight}dp'); //Status bar height , Notch will be higher Unit 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.textScaleFactory}');return Scaffold(appBar: AppBar(title: Text(widget.title),),floatingActionButton: FloatingActionButton(onPressed: () {print('ScreenUtil.getInstance().width:${ScreenUtil.getInstance().width}');print('ScreenUtil().width:${ScreenUtil().width}');},child: Icon(Icons.accessible_forward),),body: new Center(child: Column(crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Row(children: <Widget>[Container(width: ScreenUtil.getInstance().setWidth(375),height: ScreenUtil.getInstance().setHeight(200),color: Colors.red,child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',style: TextStyle(color: Colors.white,fontSize: ScreenUtil.getInstance().setSp(24),),),),Container(width: ScreenUtil.getInstance().setWidth(375),height: ScreenUtil.getInstance().setHeight(200),color: Colors.blue,child:Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',style: TextStyle(color: Colors.white,fontSize: ScreenUtil.getInstance().setSp(24),)),),],),Text('设备宽度:${ScreenUtil.screenWidth}px'),Text('设备高度:${ScreenUtil.screenHeight}px'),Text('设备宽度:${ScreenUtil.screenWidthDp}dp'),Text('设备高度:${ScreenUtil.screenHeightDp}dp'),Text('设计稿宽度:${ScreenUtil.getInstance().width}'),Text('设备的像素密度:${ScreenUtil.pixelRatio}'),Text('底部安全区距离:${ScreenUtil.bottomBarHeight}dp'),Text('状态栏高度:${ScreenUtil.statusBarHeight}dp'),Text('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}',textAlign: TextAlign.center,),Text('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',textAlign: TextAlign.center,),SizedBox(height: ScreenUtil.getInstance().setHeight(100),),Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Text('我的文字大小在设计稿上是24px,不会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize: ScreenUtil.getInstance().setSp(24))),Text('我的文字大小在设计稿上是24px,会随着系统的文字缩放比例变化',style: TextStyle(color: Colors.black,fontSize:ScreenUtil(allowFontScaling: true).setSp(24))),],)],),),);} }
总结:这次学习了使用flutter_ScreenUtil
来适配Flutter的APP应用,需要注意的是这个插件再不断升级中,所以使用的时候要使用最新版。
github地址:https://github.com/OpenFlutter/flutter_screenutil
转载于:https://www.cnblogs.com/joe235/p/11262530.html
Flutter 移动端屏幕适配方案和制作相关推荐
- 11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移动电商实战-首页_屏幕适配方案和制作 1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理 ...
- 超详细的rem+vw移动端屏幕适配方案
在说具体内容之前,我们必须了解几个概念,就是:Retina屏.物理像素.设备独立像素.设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中 ...
- 移动端高清、多屏幕适配方案
2019独角兽企业重金招聘Python工程师标准>>> 移动端高清.多屏幕适配方案 http://div.io/topic/1092 https://github.com/amfe/ ...
- 移动端屏幕适配原理以及方法讲解
序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了 ...
- flutter 基础之屏幕适配
随着苹果,Google等大厂不断研发新的设备机型,Android和iOS的设备种类越来越繁多了,有普通的屏幕16:9的,也有最近几年出来的全面屏,水滴屏,刘海屏等,Android的全面屏基本上是18: ...
- Cocos2d-html5 2.2.2的屏幕适配方案
来自:http://www.cocos2d-x.org/docs/manual/framework/html5/resolution-policy-design/zh 关于屏幕适配 作为WEB开发者, ...
- 移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
- Android屏幕适配方案
一. 手机适配的应用和使用场景 使android应用程序适用于不同的国家语言.型号.尺寸和SDK版本等手机环境中,其主要功能和界面风格保持不变. 手机适配主要包括三个方面:语言适配.屏幕适配.SDK平 ...
- Android 屏幕适配方案(七)
原文地址为: Android 屏幕适配方案(七) 一. 手机适配的应用和使用场景 使android应用程序适用于不同的国家语言.型号.尺寸和SDK版本等手机环境中,其主要功能和界面风格保持不变. 手机 ...
- 移动端屏幕适配+事件+常见问题解决
移动端屏幕适配 <meta name="viewport" content="width=device-width, initial-scale=1, maximu ...
最新文章
- minecraft666java_我的世界的666的世界
- 【中级软考】计算能力足够强大,所有加密算法原理上都会被破解吗?
- WOJ 18 动态无向图
- bzoj3238 [Ahoi2013]差异 后缀自动机
- NLP领域,哪些综述性的文章值得推荐?
- 剑指offer——数组中重复的数字
- Java 学习 day09
- Spring Boot
- mix2线刷开发板救砖_小米MIX2线刷刷机教程_小米MIX2第三方rom包_线刷救砖教程
- Flutter 未检测到iOS模拟器以及Android Studio无法获取iOS模拟器的问题
- oligo包常用函数
- Docker配置阿里云镜像加速器以及镜像的常用操作命令
- ATN项目(智能矩阵Atmatrix)是否能做到人工智能界的桥梁,从而改变世界?
- 国元证券 即将产生,借壳
- 北洋网络口打印机设置
- C#数据库图书管理系统
- 高通字库芯片GT20L16S1Y驱动 0.96寸 OLED 任意显示中文
- 和讯博客广告位置改变
- 查看bpl 引用的dll_BPL与DLL
- 省份城市区县三级联动html代码,JavaScript实现省份城市的三级联动
热门文章
- vue—点击换一批就更换一批内容_Vue.js点击切换按钮改变内容的实例讲解
- 玩客云pc端_移动端灵活弹性云电销平台解决方案
- 基于springboot+vue的大学生健康档案管理系统
- linux编写设备驱动 编译成ko文件 重新编译内核,Linux内核驱动将多个C文件编译成一个ko文件的方法——每一个C文件中都有module_init与module_exit...
- 二分查找算法详解(折半查询)
- nginx 定时分割日志
- 小D课堂 - 新版本微服务springcloud+Docker教程_2_02 微服务核心基础讲解
- 阶段1 语言基础+高级_1-3-Java语言高级_09-基础加强_第2节 反射_5_反射_概述
- windowns系统下 通过asmcmd进入asm实例时可能会遇到的一些问题
- (python3) 字符串压缩与解压