StarAndroid

Appearance

参考资料：https://juejin.cn/post/7041021257562718239#heading-1 官方资料：https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md

简介 ​

因为移动设备有不同的分辨率和屏幕尺寸，在开发中如果只是简单的使用设计稿中的固定的数值，那么在不同设备上显示的效果可能千差万别，所以需要进行屏幕适配。

原理 ​

原理很简单就是把原来写死的值，用一个比例值来替换，例如我们设置一个图片的宽度是1w(w是一个标识宽度的比例值单位），然后通过获取设备的分辨率，使用设备的真正宽度除以设计图的宽度就是1w代表的真正宽度。 这样的话我们设计图的宽度尺寸如果是100w，而真实设备上的宽度是1080，那么此时的1w = 1080/100=108 在更高分辨率的设备上例如有的机型分辨率是1440*2560，同样是显示这张设计图为100w的图片，它此时1w=1440/100=144

框架介绍 ​

pubdev地址：https://pub.dev/packages/flutter_screenutil

引入依赖 ​

dart
flutter_screenutil: ^5.9.0

初始化 ​

在使用之前需要先初始化，设置好设计稿的宽度和高度，有两种初始化的方式

ScreenUtilInit ​

使用 ScreenUtilInit 方式进行初始化，需要将项目的 MaterialApp 进行一层包裹，然后在 builder 中返回项目本身的 MaterialApp ，在 ScreenUtilInit 的 designSize 参数中传入设计图的尺寸，实现如下：

dart
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
        designSize: const Size(360, 690),
        builder: (context, builder) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
              useMaterial3: true,
            ),
            home: const MyHomePage(title: 'Flutter Demo'),
          );
        });
  }
}

ScreenUtil.init ​

直接使用 ScreenUtil.init 方法，传入屏幕尺寸、设计图尺寸和屏幕方向即可对 flutter_screenutil 进行初始化，这种初始化方式需要在使用flutter_screenutil之前，一般放在第一个页面加载时初始化，类似我们在原生开发中常常在Application中初始化第三方框架。代码如下：

dart
ScreenUtil.init(
  BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width,  //屏幕宽度
    maxHeight: MediaQuery.of(context).size.height, //屏幕高度
  ),
  designSize: const Size(360, 690), // 设计图尺寸
  orientation: Orientation.portrait); // 屏幕方向

使用 ​

适配尺寸 ​

初始化之后，直接调用api就可以使用了。例如设计图上有一个区块的大小是200*500，那么就可以这样使用：

dart
Container(
  width: ScreenUtil().setWidth(200),
  height: ScreenUtil().setHeight(500),
);

当然这样似乎很麻烦，在dart sdk不小于2.6后，可以简化这种写法：

dart
Container(
  width: 200.w,
  height:500.h
)

需要注意的是1.w!=1.h，所以我们设置 例如我设置了一个宽是200.w，高是200.h的黄色区块，在平板上就并不是正方形的效果。

dart
Container(
  width: 200.w,
  height: 200.h,
  color: Colors.orangeAccent,
)

image.png 如果要实现正方形的效果应当这样做：

dart
Container(
  width: 200.h,
  height: 200.h,
  color: Colors.orangeAccent,
)
//或者
Container(
  width: 200.w,
  height: 200.w,
  color: Colors.orangeAccent,
)

适配字体 ​

dart
//输入字体大小（单位与初始化时的单位相同）
ScreenUtil().setSp(28) 
28.sp