基础使用
@override
Widget build(BuildContext context) {
return ScreenUtilInit(
designSize: const Size(375, 812), // 配置设计图尺寸大小，单位：dp
builder: (context, child) => GetMaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
),
builder: EasyLoading.init(),
initialBinding: InitBinding(),
// 初始路由会被 InitBinding 覆盖
initialRoute: AppRoutes.initialRoute,
getPages: AppRoutes.getPages,
)
);
}
1. .w：宽度适配
使用场景：
- 当你需要根据设计图上的
dp单位来设置控件的宽度时，使用.w来适配屏幕宽度。 - 适用于任何宽度值（如按钮、容器、卡片的宽度等）需要根据设备的屏幕宽度自动调整的场景。
实际场景： 假设设计图中的按钮宽度是 200dp，你想在不同的屏幕尺寸上保持一致的宽度。
Container(
width: 200.w, // 宽度根据屏幕宽度自动缩放
height: 50.h, // 高度根据屏幕高度自动缩放
color: Colors.blue,
child: Center(child: Text('Button')),
)
在大屏设备上，按钮的宽度会更大，而在小屏设备上，宽度会更小，确保适配。
2. .h：高度适配
使用场景：
- 当你需要根据设计图上的
dp单位来设置控件的高度时，使用.h来适配屏幕高度。 - 适用于需要根据设备高度调整的控件，如高度固定的按钮、列表项等。
实际场景： 假设设计图中的按钮高度是 50dp，你希望在不同设备的屏幕上高度适配。
Container(
width: 100.w,
height: 50.h, // 高度适配屏幕高度
color: Colors.blue,
child: Center(child: Text('Button')),
)
3. .sp：字号适配
使用场景：
- 字号（
sp）在设计图中通常是一个重要的参数，需要根据不同设备的屏幕密度进行缩放。 - 适用于文本、标题等需要根据设备屏幕和用户偏好（如系统字体大小调整）进行适配的场景。
实际场景： 假设设计图中的字体大小是 16sp，你需要根据设备的屏幕密度来调整字号：
Text(
'Hello World',
style: TextStyle(
fontSize: 16.sp, // 字号根据屏幕适配
),
)
这样，字体在不同的屏幕上显示的大小会一致，确保用户体验的一致性。
4. .r：圆角适配
使用场景：
- 用于处理圆角半径的适配，确保在不同屏幕尺寸和分辨率上，圆角的显示效果一致。
- 适用于卡片、按钮、容器等需要圆角的控件。
实际场景： 假设设计图中卡片的圆角半径是 8dp，你可以使用 .r 来自动适配屏幕：
Container(
width: 200.w,
height: 100.h,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.r), // 自动适配圆角半径
),
child: Center(child: Text('Card')),
)
这样，圆角在所有设备上看起来都是一致的，不会因为屏幕尺寸的不同而显得过大或过小。
5. .textScaleFactor：字体缩放因子
使用场景：
- 用于适配用户设备上的文本缩放设置。例如，用户可以在系统设置中调整字体大小，
textScaleFactor会根据这个设置来调整字体大小。 - 适用于所有文本控件，确保在用户设置不同的字体大小时，文本不会超出容器或变得难以阅读。
实际场景： 如果用户在系统设置中增加了字体大小，你可以使用 textScaleFactor 来自动适配文本：
Text(
'Hello World',
style: TextStyle(
fontSize: 16.sp * ScreenUtil().textScaleFactor, // 适配字体缩放因子
),
)
这样，文本会根据用户的设置自动调整字体大小，而不会被强制放大或缩小。
6. .setWidth() 和 .setHeight()：宽高自定义适配
使用场景：
- 用于自定义的宽高适配。你可以根据设计图的比例来调整宽度或高度，而不只是根据屏幕尺寸进行简单缩放。
- 适用于需要根据屏幕宽度或高度比例动态计算的场景。
实际场景： 假设你希望设置一个控件的宽度为屏幕宽度的 70%，而高度为屏幕高度的 10%。
Container(
width: 100.setWidth(0.7), // 设置为屏幕宽度的 70%
height: 200.setHeight(0.1), // 设置为屏幕高度的 10%
color: Colors.blue,
child: Center(child: Text('Custom Size')),
)
7. .radius：圆角半径适配（另一种方式）
使用场景：
- 另一种方式来适配圆角，可以确保在不同屏幕上的圆角效果一致。
实际场景：
Container(
width: 200.w,
height: 100.h,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(8.radius)), // 另一种圆角适配方式
),
child: Center(child: Text('Card')),
)
总结
.w和.h用于宽高适配，确保控件的尺寸根据屏幕的尺寸自动缩放。.sp用于字号适配，确保字体大小在不同设备上的一致性，并且能适应用户的字体缩放设置。.r用于圆角适配，确保圆角在不同屏幕上显示一致。.textScaleFactor用于调整字体大小，适应系统字体大小的调整。.setWidth()和.setHeight()用于根据屏幕宽度或高度比例自定义控件尺寸。
