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 {@overrideWidget build(BuildContext context) {return ScreenUtilInit(designSize: const Size(375, 812), // 设计稿尺寸（单位：逻辑像素）minTextAdapt: true, // 允许字体根据屏幕缩放splitScreenMode: true, // 支持分屏模式builder: (context, child) {return MaterialApp(debugShowCheckedModeBanner: false,home: HomePage(),);},);}
}常用方法
-
尺寸适配
-
宽度：
50.w或ScreenUtil().setWidth(50) -
高度：
100.h或ScreenUtil().setHeight(100) -
字体：
16.sp或ScreenUtil().setSp(16)
-
-
屏幕信息获取
-
屏幕宽度：
ScreenUtil().screenWidth -
屏幕高度：
ScreenUtil().screenHeight -
状态栏高度：
ScreenUtil().statusBarHeight -
设备像素密度：
ScreenUtil().pixelRatio
-
-
横竖屏适配
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), // 字体适配),
)注意事项
-
设计稿一致性：
designSize需与 UI 设计稿尺寸一致（通常使用 iPhone 的逻辑像素，如 375x812）。 -
避免硬编码：始终使用
.w、.h、.sp替代固定数值。 -
横竖屏切换：若布局需动态适配方向，可在
ScreenUtilInit中设置rebuildFactor监听方向变化。 -
图片适配：建议使用矢量图（如
.svg），或按屏幕比例缩放位图。
常见问题
-
文本不缩放
-
确保
minTextAdapt: true。 -
在
MaterialApp中设置textScaleFactor: 1.0：
-
MaterialApp(builder: (context, child) {return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),child: child!,);},
)-
横屏布局异常
-
检查是否启用
splitScreenMode: true。 -
使用
scaleByHeight: true优先按高度缩放（针对特殊长宽比设备）
-
总结
Flutter ScreenUtil 通过简洁的 API 和自动缩放机制，简化了多设备适配的复杂性。合理使用 .w、.h、.sp 后缀，结合设计稿尺寸初始化，能够高效实现响应式布局。注意处理横竖屏和字体缩放问题，可进一步提升适配体验。
