Flutter⼩技巧总结之flutter适配宽⾼，字体
⼀，前⾔:
现在的⼿机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显⽰的效果不同，⽐如我们的设计稿⼀个View的⼤⼩是300px，如果直接写300px，可能在当前设备显⽰正常，但到了其他设备可能就会偏⼩或者偏⼤，这就需要我们对屏幕进⾏适配。
安卓原⽣的话有⾃⼰的适配规则，可以根据不同的尺⼨建⽴不同的⽂件夹，系统会根据当前的设备尺⼨取对应的⼤⼩的布局。⽽flutter 本⾝并没有适配规则，⽽原⽣的⼜⽐较繁琐，这就需要我们⾃⼰去对屏幕进⾏适配。
⼆，flutter_ScreenUtil
flutter 屏幕适配⽅案
github: github/OpenFlutter/flutter_ScreenUtil
使⽤⽅法:
安装依赖：
安装之前请查看最新版本
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^0.4.2
在每个使⽤的地⽅导⼊包：
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来做适配可以保证不变形(当你想要⼀个正⽅形的时候)
setHeight⽅法主要是在⾼度上进⾏适配, 在你想控制UI上⼀屏的⾼度与实际中显⽰⼀样时使⽤.
例如：
//长⽅形:
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
),
//如果你想显⽰⼀个正⽅形:
Container(
width: ScreenUtil().setWidth(300),
height: ScreenUtil().setWidth(300),
),
适配字体
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().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}'); //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('实际宽度的dp与设计稿px的⽐例:${ScreenUtil().scaleWidth}');
print('实际⾼度的dp与设计稿px的⽐例:${ScreenUtil().scaleHeight}');
print(
'宽度和字体相对于设计稿放⼤的⽐例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
print(
'⾼度相对于设计稿放⼤的⽐例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放⽐例:${ScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: ,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: d,
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.screenWidth}px'),
Text('设备⾼度:${ScreenUtil.screenHeight}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏⾼度:${ScreenUtil.statusBarHeight}px'),
Text(
'实际⾼度的dp与设计稿px的⽐例:${ScreenUtil().scaleHeight}',
textAlign: ,
),
Text(
'实际⾼度的dp与设计稿px的⽐例:${ScreenUtil().scaleHeight}',
textAlign: ,
),
Text(
'宽度和字体相对于设计稿放⼤的⽐例:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: ,
),
Text(
'⾼度相对于设计稿放⼤的⽐例:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: ,
),
SizedBox(
height: ScreenUtil().setHeight(100),
),
Text('系统的字体缩放⽐例:${ScaleFactory}'),
flutter sdkColumn(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的⽂字⼤⼩在设计稿上是14px，不会随着系统的⽂字缩放⽐例变化',
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text('我的⽂字⼤⼩在设计稿上是14px，会随着系统的⽂字缩放⽐例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
],
),
),
);
}
使⽤⽰例:
适配原理：
说⼀下适配⽅案, ⽐如我们设计师设计的UI是根据Iphone6来做的，我们知道 iPhone6的分辨率是750*1334(px),
⼜或者是根据hdpi的设备来设计的UI，我们知道hdpi的 Android设备是 (240 dpi)，像素密度是1.5，即hdpi设备的分辨率宽度是320px, 总之,⽆论设计稿的单位是px，或者是dp，我们都能够转换成px.
那么我们如果根据px来适配,ios和 android 就都可以兼容了.
假设，我们的设计稿⼿机是10801920 px.
设计稿上有⼀个540960 的组件, 即宽度和宽度是⼿机的⼀半. 如果我们直接写的时候组件的尺⼨这么定义，在其他尺⼨的设备上未必是⼀半，或多，或少. 但是我们可以按⽐例来看，即我们要实现的宽度是实际设备的⼀半.
那么假设我们设备的宽度是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;
那么我们要写尺⼨为500100控件的宽度就是 500scaleWidth .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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论