安装依赖:
pub地址:https://pub.dev/packages/flutter_screenutil
github地址:https://github.com/OpenFlutter/flutter_screenutil
dependencies:
flutter_screenutil: ^5.5.2 #屏幕适配
使用的地方导入包:
import 'package:flutter_screenutil/flutter_screenutil.dart';
1.初始化
方法一:
Future<void> main() async {
runApp(ScreenUtilInit(
child: GetMaterialApp(
title: "Application",
initialRoute: AppPages.INITIAL,
getPages: AppPages.routes,
),
));
}
//使用ScreenUtilInit 组件包裹
方法二:
Widget build(BuildContext context) {
ScreenUtil.init(context);//初始化
return Scaffold(
appBar: AppBar(
title: Text(
'HomeView',
style: TextStyle(
fontSize: 20,
// fontSize: ScreenUtil().setSp(20),
),
),
// centerTitle: true,
),
body: Container(
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
children: [
Container(
color: Colors.black45,
width: MediaQuery.of(context).size.width,
// height: ScreenUtil().setWidth(20),
height: 20,
),
],
),
),
);
}
//在需要的地方,widget的build方法下面调用一次。
属性:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
designSize | Size | Size(360, 690) | 设计稿中设备的尺寸(单位随意,建议dp,但在使用过程中必须保持一致) |
builder | Widget Function() | Container() | 一般返回一个MaterialApp类型的Function() |
orientation | Orientation | portrait | 屏幕方向 |
splitScreenMode | bool | false | 支持分屏尺寸 |
minTextAdapt | bool | false | 是否根据宽度/高度中的最小值适配文字 |
context | BuildContext | null | 传入context会更灵敏的根据屏幕变化而改变 |
使用api:
ScreenUtil().setWidth(540); //根据屏幕宽度适配尺寸 (dart sdk>=2.6 可以这样设置->540.w)【*】
ScreenUtil().setHeight(
200); //根据屏幕高度适配尺寸(一般根据宽度适配即可) (dart sdk>=2.6 可以这样设置-> 200.h)【*】
ScreenUtil()
.radius(200); //根据宽度或高度中的较小者进行调整 (dart sdk>=2.6 可以这样设置-> 200.r)【*】
ScreenUtil().setSp(24); //适配字体 (dart sdk>=2.6 可以这样设置-> 24.sp)【*】
ScreenUtil().pixelRatio; //设备的像素密度
ScreenUtil().screenWidth; //设备宽度 (dart sdk>=2.6 可以这样设置-> 1.sw)【*】
ScreenUtil().screenHeight; //设备高度 (dart sdk>=2.6 可以这样设置-> 1.sh)【*】
ScreenUtil().bottomBarHeight; //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil().statusBarHeight; //状态栏高度 刘海屏会更高
ScreenUtil().textScaleFactor; //系统字体缩放比例
ScreenUtil().scaleWidth; // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight; // 实际高度与设计稿高度度的比例
ScreenUtil().orientation; //屏幕方向
12.sm; // 取12和12.sp中的最小值
0.2.sw; //屏幕宽度的0.2倍
0.5.sh; //屏幕高度的50%
20; // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace; // SizedBox(height: 20 * scaleWidth)
dart sdk>=2.6
可以使用扩展函数: example: 不用这个:
Container(
width: ScreenUtil().setWidth(50),
height: ScreenUtil().setHeight(200),
);
而是用这个:
Container(
width: 50.w,
height:200.h
)
THE END