最近开发中发现一个新的控件plugin：sizer，对于适配手机和平板屏幕和字体有很达帮助，废话不多说，直接上图。
**未使用此控件：请看下图 **
**使用此控件适配后，请看下图 **
大家可以看到适配后做到了屏幕和字体的适配，如果做到的呢？
1. 下载：
在pubspec.yaml 文件里加入
dependencies:
...
sizer: ^2.0.15
复制代码2. 控件都有哪些参数：
.h- 返回屏幕高的百分比 例如.20h就是屏幕高度的百分之二十..w- 返回屏幕高的百分比 例如.20w就是屏幕宽度的百分之二十..sp- 根据屏幕的大小获取 对应设备所显示的字体大小适配不同手机屏幕显示字体的大小SizerUtil.orientation-获取屏幕的横屏还是竖屏SizerUtil.deviceType- 获取当前设备是手机还是电脑
3. 如何使用
- 首先在
.dart文件中引入
import 'package:sizer/sizer.dart';
- 使用
Sizer包裹MaterialApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Sizer(
builder: (context, orientation, deviceType) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sizer',
theme: ThemeData.light(),
home: HomeScreen() ,
);
},
);
}
}
复制代码- 在任何页面想要使用sizer 还是要先导入 （暂时还不支持自动导入）
import 'package:sizer/sizer.dart';
- 一些例子
Container(
width: 20.w, //取屏幕宽的百分之20
height:30.h //取屏幕高的百分之30
)
复制代码/// Padding 横项 - 屏幕高的百分之3 和 竖项 - 屏幕高的百分之5
Padding(
padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
child: Container(),
);
复制代码 /// 根据手机屏幕的大小 15.sp 会生成手机所需要的尺寸字体
Text(
'Sizer',style: TextStyle(fontSize: 15.sp),
);
复制代码print("使用sizer值并且在手机上打印数据：");
print(20.h);
print(10.w);
print(10.sp);
I/flutter (13030): 获取结果：荣耀9i
I/flutter (13030): 143.33333333333331
I/flutter (13030): 36.0
I/flutter (13030): 12.0
复制代码个人觉得很实用，如果你也感兴趣，请尝试一下。
官方网址：
努力💪 干就完了哈哈
