flutter屏幕适配

如今的手机品牌和型号愈来愈多，致使咱们平时写布局的时候会在个不一样的移动设备上显示的效果不一样，

好比咱们的设计稿一个View的大小是300px，若是直接写300px，可能在当前设备显示正常，但到了其余设备可能就会偏小或者偏大，这就须要咱们对屏幕进行适配。

安卓原生的话有本身的适配规则，能够根据不一样的尺寸创建不一样的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter自己并无适配规则，而原生的又比较繁琐，这就须要咱们本身去对屏幕进行适配。

点击直达github地址 若是有帮助，请给我个star

flutter_ScreenUtil

flutter 屏幕适配方案

github: github.com/OpenFlutter…

csdn博客 工具 介绍: blog.csdn.net/u011272795/…

使用方法:

安装依赖：

安装以前请查看最新版本

dependencies: flutter: sdk: flutter # 添加依赖 flutter_screenutil: ^0.3.0 复制代码

在每一个使用的地方导入包：

import 'package:flutter_screenutil/flutter_screenutil.dart'; 复制代码

初始化设置尺寸

在使用以前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) 必定在MaterialApp的home中的页面设置，以保证在每次使用以前设置好了适配尺寸:

//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context); 复制代码

使用：

适配尺寸：

//传入设计稿的px尺寸： 适配后的宽度width: ScreenUtil().setWidth(540), 适配后的高度height: ScreenUtil().setHeight(200), 高度也根据setWidth来作适配能够保证不变形 例如: Container( 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 //宽度相对于设计稿放大的倍数 ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数 复制代码

//导入 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}'); //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'); //Status bar height , Notch will be higher Unit px print( '宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}'); //The width is enlarged relative to the design draft print( '高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}'); //The height is enlarged relative to the design draft print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'); return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Row( children: <Widget>[ Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), color: Colors.red, child: Text( 'My width:${ScreenUtil().setWidth(375)}dp', style: TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(28, false)), ), ), Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), color: Colors.blue, child: Text('My width:${ScreenUtil().setWidth(375)}dp', style: TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(28, false))), ), ], ), Text('Device width：${ScreenUtil.screenWidth}px'), Text('Device height:${ScreenUtil.screenHeight}px'), Text('Device pixel density:${ScreenUtil.pixelRatio}'), Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'), Text('Status bar height:${ScreenUtil.statusBarHeight}px'), Text( 'Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}', textAlign: TextAlign.center, ), Text( 'Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}', textAlign: TextAlign.center, ), SizedBox( height: ScreenUtil().setHeight(200), ), Text('System font scaling:${ScreenUtil.textScaleFactory}'), Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( '个人文字大小是28px，不会随着系统的文字大小变化', style: TextStyle( color: Colors.black, fontSize: ScreenUtil().setSp(28, false))), Text('个人文字大小是28px，会随着系统的文字大小变化', style: TextStyle( color: Colors.black, fontSize: ScreenUtil().setSp(28))), ], ) ], ), ), ); } 复制代码

使用示例:

example demo

效果:

适配原理

说一下适配方案, 好比咱们设计师设计的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获取设备的尺寸的代码是:

如下数据为个人手机数据: import 'dart:ui'; //由于window是dart:ui中提供的,因此须要引入这个包. window.physicalSize //Size(1080.0, 1794.0) 单位px width = window.physicalSize.width //宽度 height = window.physicalSize.height //高度 //使用这个方法则无需引入包 MediaQuery.of(context).size //Size(411.4, 683.4) 单位:dp widhtDp = MediaQuery.of(context).size.width //宽度 411.4 heightDp = MediaQuery.of(context).size.height //高度 683.4 复制代码

设计稿单位是px,且尺寸为1080*1920 px 时:

scaleWidth = width / 1080; scaleHeight = height / 1920; 复制代码

那么咱们要写尺寸为500 100控件的宽度就是 500 scaleWidth .100*scaleHeigh ,注意这时单位是px,flutter中默认组件尺寸单位都是dp,咱们还要进行px->dp的操做.除以像素密度就行了. flutter获取像素密度的方法:

MediaQuery.of(context).devicePixelRatio window.physicalSize 复制代码

上面两种方法获得的是同样的结果,可是window对象来自dart:ui,因此咱们引入这个包:

import 'dart:ui';

设计稿单位是dp,且尺寸为360*640 dp 时:

scaleWidth = widhtDp / 360; scaleHeight = heightDp / 640; 那么咱们要写尺寸为500*100控件的宽度就是 500*scaleWidth .100*scaleHeigh 复制代码

字体大小适配

setSp(int fontSize, [allowFontScaling = true]) => allowFontScaling ? setWidth(fontSize) * _textScaleFactor : setWidth(fontSize); 复制代码

第一个参数为设计稿中字体的大小，单位px， 第二个参数可选，为控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。