//设置适配尺寸(填入设计稿中设备的屏幕尺寸)假如设计稿是按iPhone6的尺寸设计的(iPhone6 750 * 1334)
ScreenUtil。实例=ScreenUtil(宽度:750,身高:1334). . init(上下文);
之前
<强>使用:
<>强适配尺寸:
传入设计稿的px尺寸:
根据屏幕宽度适配宽度:ScreenUtil () .setWidth (540),
根据屏幕高度适配高度:ScreenUtil () .setHeight (200),
<强>注意
高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
setHeight方法主要是在高度上进行适配,在你想控制UI上一屏的高度与实际中显示一样时使用。
例如:
//长方形:
容器(
宽度:ScreenUtil () .setWidth (375),
高度:ScreenUtil () .setHeight (200),
）,//如果你想显示一个正方形:
容器(
宽度:ScreenUtil () .setWidth (300),
高度:ScreenUtil () .setWidth (300),
）,
之前
适配字体:
ScreenUtil () .setSp(28)//传入字体大小,根据系统的“字体大小“辅助选项来进行缩放
假ScreenUtil () .setSp(28日)//传入字体大小,不会根据系统的“字体大小“辅助选项来进行缩放
例如:
文本(
我的字体大小是28 px和与系统不会改变。”,
风格:TextStyle (
颜色:Colors.black,
字形大小:ScreenUtil ()。setSp(28日假)
）
）,
之前
其他相关api:
ScreenUtil。pixelRatio//设备的像素密度
ScreenUtil。screenWidth//设备宽度
ScreenUtil。screenHeight//设备高度
ScreenUtil。bottomBarHeight//底部安全区距离,适用于全面屏下面有按键的
ScreenUtil。statusBarHeight//状态栏高度刘海屏会更高单位px
ScreenUtil。textScaleFactory//系统字体缩放比例
ScreenUtil ()。scaleWidth//实际宽度的dp与设计稿px的比例
ScreenUtil ()。scaleHeight//实际高度的dp与设计稿px的比例
//导入
导入的包:flutter_screenutil/flutter_screenutil.dart ';
…
@override
小部件构建(BuildContext上下文){//设置适配尺寸(填入设计稿中设备的屏幕尺寸)假如设计稿是按iPhone6的尺寸设计的(iPhone6 750 * 1334)
ScreenUtil。实例=ScreenUtil(宽度:750,身高:1334). . init(上下文);
打印(“设备宽度:$ {ScreenUtil.screenWidth}’);//设备宽度
打印(“设备高度:$ {ScreenUtil.screenHeight}’);//设备的高度
打印(“设备的像素密度:$ {ScreenUtil.pixelRatio} ');//设备像素密度
打印(
的底部安全区距离:$ {ScreenUtil.bottomBarHeight}’);//底部安全区域距离,适合与全屏按钮
打印(
的状态栏高度:$ {ScreenUtil.statusBarHeight} px”);//状态栏高度,切口会更高像素单元
打印(“实际宽度的dp与设计稿px的比例:$ {ScreenUtil () .scaleWidth}”);
打印(“实际高度的dp与设计稿px的比例:$ {ScreenUtil () .scaleHeight}”);
打印(
“宽度和字体相对于设计稿放大的比例:$ {ScreenUtil ()。scaleWidth * ScreenUtil.pixelRatio}’);
打印(
“高度相对于设计稿放大的比例:$ {ScreenUtil ()。scaleHeight * ScreenUtil.pixelRatio}’);
打印('系统的字体缩放比例:$ {ScreenUtil.textScaleFactory} ');
返回新支架(
appBar:新appBar (
标题:新文本(widget.title),
）,
身体:新中心(
孩子:列(
crossAxisAlignment: CrossAxisAlignment.center,
孩子们:& lt; Widget> (
行(
孩子们:& lt; Widget> (
容器(
宽度:ScreenUtil () .setWidth (375),
高度:ScreenUtil () .setHeight (200),
颜色:Colors.red,
孩子:文本(
“我的宽度:$ {ScreenUtil () .setWidth (375)} dp”,
风格:TextStyle (
颜色:Colors.white,
字形大小:ScreenUtil ()。假setSp(12日),
）,
）,
）,
容器(
宽度:ScreenUtil () .setWidth (375),
高度:ScreenUtil () .setHeight (200),
颜色:Colors.blue,
孩子:文本(“我的宽度:$ {ScreenUtil () .setWidth (375)} dp”,
风格:TextStyle (
颜色:Colors.white,
字形大小:ScreenUtil ()。假setSp(12日),
）），
）,
]，
）,
文本(“设备宽度:$ {ScreenUtil.screenWidth} px”),
文本(“设备高度:$ {ScreenUtil.screenHeight} px”),
文本(“设备的像素密度:$ {ScreenUtil.pixelRatio} '),
文本(“底部安全区距离:$ {ScreenUtil.bottomBarHeight} px '),
文本(的状态栏高度:$ {ScreenUtil.statusBarHeight} px”),
文本(
“实际高度的dp与设计稿px的比例:$ {ScreenUtil () .scaleHeight}”,
textAlign: TextAlign.center,
）,
文本(
“实际高度的dp与设计稿px的比例:$ {ScreenUtil () .scaleHeight}”,
textAlign: TextAlign.center,
）,
文本(
“宽度和字体相对于设计稿放大的比例:$ {ScreenUtil ()。scaleWidth * ScreenUtil.pixelRatio}”,
textAlign: TextAlign.center,
）,
文本(
“高度相对于设计稿放大的比例:$ {ScreenUtil ()。scaleHeight * ScreenUtil.pixelRatio}”,
textAlign: TextAlign.center,
）,
SizedBox (
高度:ScreenUtil () .setHeight (100),
）,
文本(“系统的字体缩放比例:$ {ScreenUtil.textScaleFactory} '),
列(
crossAxisAlignment: CrossAxisAlignment.start,
孩子们:& lt; Widget> (
文本(“我的文字大小在设计稿上是14 px,不会随着系统的文字缩放比例变化”,
风格:TextStyle (
颜色:Colors.black,
字形大小:ScreenUtil ()。假setSp(14日))),
文本(“我的文字大小在设计稿上是14 px,会随着系统的文字缩放比例变化”,
风格:TextStyle (
颜色:颜色。黑色,字形大小:ScreenUtil () .setSp (14))),
]，
）
]，
）,
）,
）；
}
