用flutter的这个库,可以解决:https://pub.dev/packages/flutter_screenutil
使用方法:
- 在
pubspec.yaml
文件中,添加库,如下图:
- 在
main.dart
中导入头文件
import 'package:flutter_screenutil/flutter_screenutil.dart';
- 在
Widget build(BuildContext context)
方法中,初始化ScreenUtilInit
, 代码如下:
class _MyAppState extends State<MyApp> {
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: Size(750, 1334),
minTextAdapt: true,
splitScreenMode: true,
builder: (_, child) {
return MaterialApp(
// home: Tabs()
initialRoute: '/',
onGenerateRoute: onGenerateRoute,
);
},
);
}
}
- 使用方法说明
ScreenUtil().setWidth(540) (dart sdk>=2.6 : 540.w) //Adapted to screen width
ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h) //Adapted to screen height , under normal circumstances, the height still uses x.w
ScreenUtil().radius(200) (dart sdk>=2.6 : 200.r) //Adapt according to the smaller of width or height
ScreenUtil().setSp(24) (dart sdk>=2.6 : 24.sp) //Adapter font
12.sm //return min(12,12.sp)
ScreenUtil().pixelRatio //Device pixel density
ScreenUtil().screenWidth (dart sdk>=2.6 : 1.sw) //Device width
ScreenUtil().screenHeight (dart sdk>=2.6 : 1.sh) //Device height
ScreenUtil().bottomBarHeight //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil().statusBarHeight //Status bar height , Notch will be higher
ScreenUtil().textScaleFactor //System font scaling factor
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
ScreenUtil().orientation //Screen orientation
0.2.sw //0.2 times the screen width
0.5.sh //50% of screen height
20.setVerticalSpacing // SizedBox(height: 20 * scaleHeight)
20.horizontalSpace // SizedBox(height: 20 * scaleWidth)
const RPadding.all(8) // Padding.all(8.r) - take advantage of const key word
EdgeInsets.all(10).w //EdgeInsets.all(10.w)
REdgeInsets.all(8) // EdgeInsets.all(8.r)
EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
BoxConstraints(maxWidth: 100, minHeight: 100).w //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
Radius.circular(16).w //Radius.circular(16.w)
BorderRadius.all(Radius.circular(16)).w
- 可以看看官方文档的说明,这里不再写了。