这篇博客介绍了如何在Flutter中进行屏幕尺寸适配和字体大小适配，使用了flutter_screenutil库，并提供了相关API的使用示例。同时提到了Android面试中常见的算法问题。
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 // 实际宽度的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(‘设备宽度:
S
c
r
e
e
n
U
t
i
l
.
s
c
r
e
e
n
W
i
d
t
h
′
)
;
/
/
D
e
v
i
c
e
w
i
d
t
h
p
r
i
n
t
(
′
设
备
高
度
:
{ScreenUtil.screenWidth}'); //Device width print('设备高度:
ScreenUtil.screenWidth′);//Devicewidthprint(′设备高度:{ScreenUtil.screenHeight}’); //Device height
print(‘设备的像素密度:
S
c
r
e
e
n
U
t
i
l
.
p
i
x
e
l
R
a
t
i
o
′
)
;
/
/
D
e
v
i
c
e
p
i
x
e
l
d
e
n
s
i
t
y
p
r
i
n
t
(
′
底
部
安
全
区
距
离
:
{ScreenUtil.pixelRatio}'); //Device pixel density print( '底部安全区距离:
ScreenUtil.pixelRatio′);//Devicepixeldensityprint(′底部安全区距离:{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的比例: S c r e e n U t i l ( ) . s c a l e W i d t h ′ ) ; p r i n t ( ′ 实 际 高 度 的 d p 与 设 计 稿 p x 的 比 例 : {ScreenUtil().scaleWidth}'); print('实际高度的dp与设计稿px的比例: ScreenUtil().scaleWidth′);print(′实际高度的dp与设计稿px的比例:{ScreenUtil().scaleHeight}’);
print(
‘宽度和字体相对于设计稿放大的比例:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
c
a
l
e
W
i
d
t
h
∗
S
c
r
e
e
n
U
t
i
l
.
p
i
x
e
l
R
a
t
i
o
′
)
;
p
r
i
n
t
(
′
高
度
相
对
于
设
计
稿
放
大
的
比
例
:
{ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); print( '高度相对于设计稿放大的比例:
ScreenUtil().scaleWidth∗ScreenUtil.pixelRatio′);print(′高度相对于设计稿放大的比例:{ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}’);
print(‘系统的字体缩放比例:${ScreenUtil.textScaleFactory}’);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
width: ScreenUtil().setWidth(375),
height: ScreenUtil().setHeight(200),
color: Colors.red,
child: Text(
‘我的宽度:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
e
t
W
i
d
t
h
(
375
)
d
p
′
,
s
t
y
l
e
:
T
e
x
t
S
t
y
l
e
(
c
o
l
o
r
:
C
o
l
o
r
s
.
w
h
i
t
e
,
f
o
n
t
S
i
z
e
:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
e
t
S
p
(
12
,
f
a
l
s
e
)
,
)
,
)
,
)
,
C
o
n
t
a
i
n
e
r
(
w
i
d
t
h
:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
e
t
W
i
d
t
h
(
375
)
,
h
e
i
g
h
t
:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
e
t
H
e
i
g
h
t
(
200
)
,
c
o
l
o
r
:
C
o
l
o
r
s
.
b
l
u
e
,
c
h
i
l
d
:
T
e
x
t
(
′
我
的
宽
度
:
{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),),),),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(‘设备宽度:
S
c
r
e
e
n
U
t
i
l
.
s
c
r
e
e
n
W
i
d
t
h
p
x
′
)
,
T
e
x
t
(
′
设
备
高
度
:
{ScreenUtil.screenWidth}px'), Text('设备高度:
ScreenUtil.screenWidthpx′),Text(′设备高度:{ScreenUtil.screenHeight}px’),
Text(‘设备的像素密度:
S
c
r
e
e
n
U
t
i
l
.
p
i
x
e
l
R
a
t
i
o
′
)
,
T
e
x
t
(
′
底
部
安
全
区
距
离
:
{ScreenUtil.pixelRatio}'), Text('底部安全区距离:
ScreenUtil.pixelRatio′),Text(′底部安全区距离:{ScreenUtil.bottomBarHeight}px’),
Text(‘状态栏高度:
S
c
r
e
e
n
U
t
i
l
.
s
t
a
t
u
s
B
a
r
H
e
i
g
h
t
p
x
′
)
,
T
e
x
t
(
′
实
际
高
度
的
d
p
与
设
计
稿
p
x
的
比
例
:
{ScreenUtil.statusBarHeight}px'), Text( '实际高度的dp与设计稿px的比例:
ScreenUtil.statusBarHeightpx′),Text(′实际高度的dp与设计稿px的比例:{ScreenUtil().scaleHeight}’,
textAlign: TextAlign.center,
),
Text(
‘实际高度的dp与设计稿px的比例:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
c
a
l
e
H
e
i
g
h
t
′
,
t
e
x
t
A
l
i
g
n
:
T
e
x
t
A
l
i
g
n
.
c
e
n
t
e
r
,
)
,
T
e
x
t
(
′
宽
度
和
字
体
相
对
于
设
计
稿
放
大
的
比
例
:
{ScreenUtil().scaleHeight}', textAlign: TextAlign.center, ), Text( '宽度和字体相对于设计稿放大的比例:
ScreenUtil().scaleHeight′,textAlign:TextAlign.center,),Text(′宽度和字体相对于设计稿放大的比例:{ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}’,
textAlign: TextAlign.center,
),
Text(
‘高度相对于设计稿放大的比例:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
c
a
l
e
H
e
i
g
h
t
∗
S
c
r
e
e
n
U
t
i
l
.
p
i
x
e
l
R
a
t
i
o
′
,
t
e
x
t
A
l
i
g
n
:
T
e
x
t
A
l
i
g
n
.
c
e
n
t
e
r
,
)
,
S
i
z
e
d
B
o
x
(
h
e
i
g
h
t
:
S
c
r
e
e
n
U
t
i
l
(
)
.
s
e
t
H
e
i
g
h
t
(
100
)
,
)
,
T
e
x
t
(
′
系
统
的
字
体
缩
放
比
例
:
{ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}', textAlign: TextAlign.center, ), SizedBox( height: ScreenUtil().setHeight(100), ), Text('系统的字体缩放比例:
ScreenUtil().scaleHeight∗ScreenUtil.pixelRatio′,textAlign:TextAlign.center,),SizedBox(height:ScreenUtil().setHeight(100),),Text(′系统的字体缩放比例:{ScreenUtil.textScaleFactory}’),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(‘我的文字大小在设计稿上是14px，不会随着系统的文字缩放比例变化’,
style: TextStyle(
color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text(‘我的文字大小在设计稿上是14px，会随着系统的文字缩放比例变化’,
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(14))),
],
)
],
),
),
);
}
使用示例:
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MP5ryYtF-1647528567354)(https://user-gold-cdn.xitu.io/2018/10/18/16685970a9b3aa34?imageView2/0/w/1280/h/960/ignore-error/1)]
适配原理
说一下适配方案, 比如我们设计师设计的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获取设备的尺寸的代码是:
以下数据为我的手机数据:
最后
这里我希望可以帮助到大家提升进阶。
内容包含：Android学习PDF+架构视频+面试文档+源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料 这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。
喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~
一下呗~
扫一扫
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
