flutter屏幕尺⼨适配字体⼤⼩适配,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
text align centerScreenUtil().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.screenHeight}’); //Device height 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().scaleHeight}’);
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: [
Row(
children: [
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),
)),
),
],
),
Text(‘设备宽度:{ScreenUtil.screenHeight}px’),
Text(‘设备的像素密度:{ScreenUtil.bottomBarHeight}px’),
Text(‘状态栏⾼度:{ScreenUtil().scaleHeight}’,textAlign: ,
),
Text(
‘实际⾼度的dp与设计稿px的⽐例:{ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}’,textAlign: ,
),
Text(
‘⾼度相对于设计稿放⼤的⽐例:{ScaleFactory}’),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
ScreenUtil .screenWidth );//Devicewidthprint (设备⾼度:′′ScreenUtil .pixelRatio );//Devicepixeldensityprint (底部安全区距离:
′′ScreenUtil ().scaleWidth );print (实际⾼度的dp 与设计稿px 的⽐例:
′ScreenUtil ().scaleWidth ∗ScreenUtil .pixelRatio );print (⾼度相对于设计稿放⼤的⽐例:′
′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 .screenWidthpx ),Text (设备⾼度:′′ScreenUtil .pixelRatio ),Text (底部安全区距离:′′ScreenUtil .statusBarHeightpx ),Text (实际⾼度的dp 与设计稿px 的⽐例:′′ScreenUtil ().scaleHeight ,textAlign :′
TextAlign .center ,),Text (宽度和字体相对于设计稿放⼤的⽐例:′ScreenUtil ().scaleHeight ∗ScreenUtil .pixelRatio ,textAlign :′
TextAlign .center ,),SizedBox (height :ScreenUtil ().setHeight (100),),Text (系统的字体缩放⽐例:
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))),
],
)
],
)
,
),
);
}
使⽤⽰例:
效果:
适配原理
说⼀下适配⽅案, ⽐如我们设计师设计的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开发⾯试专题资料,⾼级进阶架构资料这⼏块的内容。⾮常适合近期有⾯试和想在技术道路上继续精进的朋友。
喜欢本⽂的话,不妨给我点个⼩赞、评论区留⾔或者转发⽀持⼀下呗~
⼀下呗~

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。