【flutter项目实战】第八节 在flutter项目中实现屏幕适配

在flutter中，屏幕适配非常简单，只需要使用一个扩展即可flutter_screenutil

一 原理分析

flutter_screenutil的逻辑就是，你设置好你的UI的屏幕尺寸，然后她会根据你后续设置的值
和当前屏幕的比例进行计算并赋值

二 如何使用

1. 引入包

使用 flutter pub add flutter_screenutil 命令安装最新版
或者 直接在pubspec.yaml 里手动引入flutter_screenutil: ^5.9.0

2. 基本配置

我们需要在main.dart文件里进行配置后，才可以在页面中使用
具体配置方法如下、

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'package:get/get.dart';

import 'app/routes/app_pages.dart';

void main() {
  runApp(
    ScreenUtilInit(
      designSize: const Size(1080, 2400), //设计稿宽高的px
      minTextAdapt: true,       //是否根据宽度/高度中的最小值适配文字
      splitScreenMode: true,   //支持分屏尺寸
      builder: (context,child){
        return GetMaterialApp(
          title: "Application",
          initialRoute: AppPages.INITIAL,
          getPages: AppPages.routes,
        );
      },
    ),
  );
}

注意：必须使用 ScreenUtilInit 包裹，才可以使用。接下来，你就可以在页面里进行配置了

3. 正式使用

抄袭一下官方文档提供的使用方法

	ScreenUtil().setWidth(540)  (dart sdk>=2.6 : 540.w)   //根据屏幕宽度适配尺寸
    ScreenUtil().setHeight(200) (dart sdk>=2.6 : 200.h)   //根据屏幕高度适配尺寸(一般根据宽度适配即可)
    ScreenUtil().radius(200)    (dart sdk>=2.6 : 200.r)   //根据宽度或高度中的较小者进行调整
    ScreenUtil().setSp(24)      (dart sdk>=2.6 : 24.sp)   //适配字体
    12.sm   // 取12和12.sp中的最小值

    ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth   (dart sdk>=2.6 : 1.sw)   //设备宽度
    ScreenUtil.screenHeight  (dart sdk>=2.6 : 1.sh)   //设备高度
    ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
    ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高
    ScreenUtil.textScaleFactor //系统字体缩放比例

    ScreenUtil().scaleWidth  // 实际宽度设计稿宽度的比例
    ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例

    ScreenUtil().orientation  //屏幕方向

    0.2.sw  //屏幕宽度的0.2倍
    0.5.sh  //屏幕高度的50%
    20.setVerticalSpacing  // SizedBox(height: 20 * scaleHeight)
    20.horizontalSpace  // SizedBox(height: 20 * scaleWidth)
    const RPadding.all(8)   // Padding.all(8.r) - 获取到const的优点
    EdgeInsets.all(10).w    //EdgeInsets.all(10.w)
    REdgeInsets.all(8)       // EdgeInsets.all(8.r)
    EdgeInsets.only(left:8,right:8).r // EdgeInsets.only(left:8.r,right:8.r).
    BoxConstraints(maxWidth: 100, minHeight: 100).w    //BoxConstraints(maxWidth: 100.w, minHeight: 100.w)
    Radius.circular(16).w          //Radius.circular(16.w)
    BorderRadius.all(Radius.circular(16)).w  

当然，看到这篇文章时，你几乎是在使用3.x版本的flutter sdk，所以

//我们设置宽度应该是这样：
200.w
//我们设置高度应该是这样：
200.h
//我们设置字体应该是这样：
24.sp

接下来我们看一段代码

Column(
          children: [
            Container(
              color: Colors.red,
              width: 1080.w, //设置宽度
              height: 500.h, //设置高度
            ),
            Container(
              color: Colors.green,
              width: 1080.w,
              height: 300.h,
              child: Text(
                "测试字体",
                style: TextStyle(fontSize: 32.sp),  //设置字体
              ),
            ),
          ],
        ),

4. 封装类

为了避免包更新导致的用法更改（其实随着flutter的更新，这个包用法也变过几次），我们将其封装成类，来使用
我们新建一个ScreenAdapter类

import 'package:flutter_screenutil/flutter_screenutil.dart';

class ScreenAdapter{
 //设置宽度
  static width(num v){
    return v.w;
  }
 //设置高度
  static height(num v){
    return v.h;
  }
//设置字体
  static fontSize(num v){
    return v.sp;
  }
  //获取屏幕宽度
  static getScreenWidth(){
    return 1.sw;
  }
  //获取屏幕高度
  static getScreenHeight(){
    return 1.sh;
  }
}

5. 封装类的时候

看下面代码

 Container(
  color: Colors.red,
   width: ScreenAdapter.width(1080),
   height: ScreenAdapter.height(500),
 ),

6. 结束