flutter_screenutil的使用

Flutter ScreenUtil 是一个用于屏幕适配的库，旨在解决不同设备尺寸、分辨率和方向的布局适配问题，确保应用在不同设备上显示一致。核心功能包括：

• 根据屏幕尺寸自动缩放尺寸（宽、高、字体、边距等）。

• 支持横竖屏切换适配。

• 提供简洁的 API（如 .w、.h、.sp 后缀）。

安装

在 pubspec.yaml 中添加依赖（以最新版本为例）：

dependencies:
  flutter_screenutil: ^5.9.3

初始化

在 main.dart 的入口处初始化，推荐使用 ScreenUtilInit 包裹 MaterialApp：

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812), // 设计稿尺寸（单位：逻辑像素）
      minTextAdapt: true, // 允许字体根据屏幕缩放
      splitScreenMode: true, // 支持分屏模式
      builder: (context, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: HomePage(),
        );
      },
    );
  }
}

常用方法

1. 尺寸适配

   • 宽度：50.w 或 ScreenUtil().setWidth(50)

   • 高度：100.h 或 ScreenUtil().setHeight(100)

   • 字体：16.sp 或 ScreenUtil().setSp(16)

2. 屏幕信息获取

   • 屏幕宽度：ScreenUtil().screenWidth

   • 屏幕高度：ScreenUtil().screenHeight

   • 状态栏高度：ScreenUtil().statusBarHeight

   • 设备像素密度：ScreenUtil().pixelRatio

3. 横竖屏适配

if (ScreenUtil().orientation == Orientation.portrait) {
  // 竖屏逻辑
} else {
  // 横屏逻辑
}

使用示例

Container(
  width: 100.w, // 宽度适配
  height: 200.h, // 高度适配
  margin: EdgeInsets.all(10.w), // 边距适配
  child: Text(
    'Hello ScreenUtil',
    style: TextStyle(fontSize: 16.sp), // 字体适配
  ),
)

注意事项

1. 设计稿一致性：designSize 需与 UI 设计稿尺寸一致（通常使用 iPhone 的逻辑像素，如 375x812）。

2. 避免硬编码：始终使用 .w、.h、.sp 替代固定数值。

3. 横竖屏切换：若布局需动态适配方向，可在 ScreenUtilInit 中设置 rebuildFactor 监听方向变化。

4. 图片适配：建议使用矢量图（如 .svg），或按屏幕比例缩放位图。

常见问题

1. 文本不缩放

   • 确保 minTextAdapt: true。

   • 在 MaterialApp 中设置 textScaleFactor: 1.0：

MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: child!,
    );
  },
)

1. 横屏布局异常

   • 检查是否启用 splitScreenMode: true。

   • 使用 scaleByHeight: true 优先按高度缩放（针对特殊长宽比设备）

总结

Flutter ScreenUtil 通过简洁的 API 和自动缩放机制，简化了多设备适配的复杂性。合理使用 .w、.h、.sp 后缀，结合设计稿尺寸初始化，能够高效实现响应式布局。注意处理横竖屏和字体缩放问题，可进一步提升适配体验。