前言

做移動(dòng)端開發(fā)的小伙伴都知道，針對不同型號(hào)和尺寸的手機(jī)要進(jìn)行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進(jìn)行適配呢？以下為近期flutter開發(fā)過程中關(guān)于適配的一些學(xué)習(xí)和記錄~~~~

比例適配

說到flutter屏幕適配，就不得不提到插件flutter_screenutil，提到flutter_screenutil就不得不說以下幾點(diǎn)??

1.初始化

• 1.2版本之前這么玩

???默認(rèn)寬1080px
???默認(rèn)高1920px
???allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化
???初始化單位為px

ScreenUtil.init(context);
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling :true);

需要把context傳進(jìn)去，因?yàn)閮?nèi)部是通過MediaQuery來獲取屏幕尺寸等相關(guān)信息的

MediaQueryData mediaQuery = MediaQuery.of(context);

• 1.2版本以后這么玩

ScreenUtil.init();
ScreenUtil.init(width: 750, height: 1334);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true);

無需再傳context，因?yàn)閮?nèi)部是通過單例window來獲取屏幕尺寸等相關(guān)信息的

• 初始化的位置
  重點(diǎn)來了，為保證在使用插件的適配方法前，插件已經(jīng)初始化完成，初始化方法要放在MaterialApp的home中，并且只有放在StatefulWidget的build方法中才會(huì)生效~
  補(bǔ)充說明：這里不關(guān)心是純flutter項(xiàng)目，還是flutter和原生混合開發(fā)棧的項(xiàng)目，初始化的位置保持一致

2.使用方法

• 通用寫法

ScreenUtil().setWidth(540)
ScreenUtil().setHeight(200)
ScreenUtil().setSp(24)
ScreenUtil().setSp(24, allowFontScalingSelf: true)
ScreenUtil().setSp(24, allowFontScalingSelf: false)

• dart sdk >= 2.6可使用簡化寫法

按寬適配: 540.w
按高適配: 200.h
字體適配: 24.sp

• 其他屬性和方法

ScreenUtil.pixelRatio
ScreenUtil.screenWidth 物理寬度
ScreenUtil.screenHeight 物理高度
ScreenUtil.bottomBarHeight 底部安全區(qū)高度
ScreenUtil.statusBarHeight 狀態(tài)欄高度（含劉海）px
ScreenUtil.textScaleFactor 系統(tǒng)字體

ScreenUtil().scaleWidth 實(shí)際寬度的dp與設(shè)計(jì)稿px的比例
ScreenUtil().scaleHeight 實(shí)際高度的dp與設(shè)計(jì)稿px的比例

3.實(shí)用擴(kuò)展

作為iOS開發(fā)，之前都是以pt為參照進(jìn)行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關(guān)常量，傳px進(jìn)去不太方便，所以需要對flutter_screenutil進(jìn)行擴(kuò)展

公司設(shè)計(jì)圖是以iPhone X的尺寸提供的即物理設(shè)備尺寸為375x812，像素比例為750x1624,像素密度比為2

初始化仍用px來初始化

ScreenUtil.init(width: 750, height: 1624);

dart sdk 2.7正式支持extension-method，即為已有類擴(kuò)展方法，從 flutter_screenutil 這種540.w寫法點(diǎn)進(jìn)去，我們可以看到

extension SizeExtension on num {
  num get w => ScreenUtil().setWidth(this);

  num get h => ScreenUtil().setHeight(this);

  num get sp => ScreenUtil().setSp(this);

  num get ssp => ScreenUtil().setSp(this, allowFontScalingSelf: true);

  num get nsp => ScreenUtil().setSp(this, allowFontScalingSelf: false);
}

flutter_screenutil為num類擴(kuò)展了一系列簡寫方法，那我們當(dāng)然可以按照它這種方式進(jìn)行擴(kuò)展

/// 設(shè)計(jì)圖像素密度比px/pt
const pixelRatio = 2;
/// 傳pt即可
extension ZRSizeExtension on num {
  num get zW => ScreenUtil().setWidth(this * pixelRatio);

  num get zH => ScreenUtil().setHeight(this * pixelRatio);

  num get zSp => ScreenUtil().setSp(this * pixelRatio);

  num get zSsp => ScreenUtil().setSp(this * pixelRatio, allowFontScalingSelf: true);

  num get zNsp => ScreenUtil().setSp(this * pixelRatio, allowFontScalingSelf: false);
}

4.遇到問題

• extension-method
  使用extension-method來擴(kuò)展方法，需要Dart sdk最低版本為2.6，否則會(huì)報(bào)錯(cuò):

This requires the 'extension-methods' experiment to be enabled.

網(wǎng)上提供的解決方案：
第一步：修改 pubspec.yaml

environment:
  sdk: ">=2.6.0 <3.0.0"

第二步：執(zhí)行flutter pub get
第三步：重啟 AndroidStudio

• 賦值報(bào)錯(cuò)

Container(
        padding: const EdgeInsets.only(10.zW),
        child: Row(),
 )

Arguments of a constant creation must be constant expressions.

解決方案：去掉const即可

參考文章

UI設(shè)計(jì)中px、pt、ppi、dpi、dp、sp之間的關(guān)系
Dart/Flutter - 擴(kuò)展方法(ExtensionMethod)