Flutter应用框架搭建之屏幕适配

handsome_longlong

已于 2022-11-14 17:30:40 修改

阅读量2.1k

点赞数

分类专栏： Flutter 文章标签： flutter android

于 2022-11-14 17:23:54 首次发布

本文链接：https://blog.csdn.net/xiao_le_/article/details/127851258

版权

Flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

背景：

移动设备多样性，特别是Android的碎片化严重，存在各种各样的分辨率，flutter跨平台开发又需要同时支持Android和IOS，为尽可能的还原设计图效果提升用户的体验，根据设计稿设计屏幕ui的时候我们需要考虑到屏幕适配的问题。

推荐方法：

直接使用ScreenUtil.init方法，传入屏幕尺寸、设计图尺寸和屏幕方向可以对flutter_screenutil进行初始化，代码如下：

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

使用这种方式只需要在使用flutter_screenutil前进行初始化即可，一般放在根路由即第一个页面加载的时候进行初始化。
注意：ScreenUtil.init不能够在MyApp中进行初始化，此时还没有加载MaterialApp无法使用MediaQuery.of（context)获取到屏幕的宽高。
初始化以后就可以使用flutter_screenutil提供的方法获取到适配后的数值进行使用了。
可以通过如下的api获取宽高以及字体的适配数值。

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配

传入的参数即为设计图上的大小。在实际使用中的示例如下：

Container(
  width: ScreenUtil().setWidth(200),
  height: ScreenUtil().setHeight(540),
  child: Text("Hello", style: TextStyle(fontSize: ScreenUtil().setSp(24)),),
);

flutter_screenutil更简单的写法，使用dart扩展的num类型：
上面的每一个方法和下面的相对应：

ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

相应的修改之后的使用示例：

Container(
width: 200.w,
height: 540.h,
child: Text("Hello", style: TextStyle(fontSize: 24.sp),),
);

注意：1.w!=1.h除非屏幕的分辨率比例和设计图的比例一致，所以要设置正方形，切记使用相同的单位，如果设置相同的w和h，可能是长方形。
除了上面的4钟扩展属性以外，还提供了sm以及sw和sh
sm：取数值本身和sp的值较小的值，如：12.sm则取12和12.sp的值进行比较，取较小的值。
sw：screen width的缩写，表示的是屏幕宽度，作用是按照屏幕宽度比例返回值。如0.2sw则返回屏幕宽度的20%，1.sw则是整个屏幕宽度
sh：screen height的缩写，即屏幕高度，作用于sw类似，返回指定比例的屏幕高度值。如1.sh为整个屏幕的高度。
使用sp作为字体单位，默认是会随着系统字体缩放进行变化的，如果不想让字体随着系统的缩放进行变化，可以设置textScaleFactor为1.0来实现。项目中可对MaterialApp进行全局设置，或者对Text进行单独的设置。
全局设置：

MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter_ScreenUtil',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        builder: (context, widget) {
          return MediaQuery(
            ///设置文字大小不随系统设置改变
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: widget,
          );
        },
        home: HomePage(title: 'FlutterScreenUtil Demo'),
      ),

单独设置：