Flutter：适配学习

flutter 屏幕适配方案，让你的UI在不同尺寸的屏幕上都能显示合理的布局!

Flutter的适配可以使用flutter_ScreenUtil

使用方法

安装

安装之前请查看最新版本 新版本如有问题请使用上一版

dependencies:
  flutter:
    sdk: flutter
  # 添加依赖
  flutter_screenutil: ^{latest version}

在每个使用的地方导入包：
import 'package:flutter_screenutil/flutter_screenutil.dart';

属性

designSize

类型：Size，例如：Size(360, 690）作用：设计稿中设备的尺寸(单位随意,但在使用过程中必须保持一致)

allowFontScaling

类型：bool，默认值： false，作用：设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放

初始化并设置适配尺寸及字体大小是否根据系统的“字体大小”辅助选项来进行缩放

在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位随意,但在使用过程中必须保持一致) 一定要进行初始化(只需设置一次),以保证在每次使用之前设置好了适配尺寸:

//填入设计稿中设备的屏幕尺寸

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 初始化
    ScreenUtil.init(
      // 设备像素大小(必须在首页中获取)
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height,
      ),
      // 设计尺寸
      designSize: Size(750, 1334),
      allowFontScaling: false,
    );
    return Container(
      child: child,
    );
  }
}

使用

API

传入设计稿的dp尺寸

    ScreenUtil().setWidth(540)  (sdk>=2.6 : 540.w)   //根据屏幕宽度适配尺寸
    ScreenUtil().setHeight(200) (sdk>=2.6 : 200.h)   //根据屏幕高度适配尺寸(一般根据宽度适配即可)
    ScreenUtil().radius(200)    (sdk>=2.6 : 200.r)   //根据宽度或高度中的较小者进行调整
    ScreenUtil().setSp(24)      (sdk>=2.6 : 24.sp)   //适配字体
    ScreenUtil().setSp(24, allowFontScalingSelf: true)   (sdk>=2.6 : 24.ssp) //适配字体(根据系统的“字体大小”辅助选项来进行缩放)
    ScreenUtil().setSp(24, allowFontScalingSelf: false)  (sdk>=2.6 : 24.nsp) //适配字体(不会根据系统的“字体大小”辅助选项来进行缩放)

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

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

    0.2.sw  //屏幕宽度的0.2倍
    0.5.sh  //屏幕高度的50%