Flutter flutter_screenutil 常用适配单位与场景（.w, .h, .sp, .r ...）

基础使用

@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() 用于根据屏幕宽度或高度比例自定义控件尺寸。