前言
做移動端開發的小伙伴都知道，針對不同型號和尺寸的手機要進行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進行適配呢？以下為近期flutter開發過程中關于適配的一些學習和記錄~~~~
比例適配
說到flutter屏幕適配，就不得不提到插件flutter_screenutil，提到flutter_screenutil就不得不說以下幾點??
1.初始化
- 1.2版本之前這么玩
???默認寬1080px
???默認高1920px
???allowFontScaling為false，即不跟隨系統字體大小設置變化
???初始化單位為px
ScreenUtil.init(context);
ScreenUtil.init(context, width: 750, height: 1334);
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling :true);
需要把context傳進去，因為內部是通過MediaQuery來獲取屏幕尺寸等相關信息的
MediaQueryData mediaQuery = MediaQuery.of(context);
- 1.2版本以后這么玩
ScreenUtil.init();
ScreenUtil.init(width: 750, height: 1334);
ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true);
無需再傳context，因為內部是通過單例window來獲取屏幕尺寸等相關信息的
-
初始化的位置
重點來了，為保證在使用插件的適配方法前，插件已經初始化完成，初始化方法要放在MaterialApp的home中，并且只有放在StatefulWidget的build方法中才會生效~
補充說明：這里不關心是純flutter項目，還是flutter和原生混合開發棧的項目，初始化的位置保持一致
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 底部安全區高度
ScreenUtil.statusBarHeight 狀態欄高度（含劉海）px
ScreenUtil.textScaleFactor 系統字體
ScreenUtil().scaleWidth 實際寬度的dp與設計稿px的比例
ScreenUtil().scaleHeight 實際高度的dp與設計稿px的比例
3.實用擴展
作為iOS開發，之前都是以pt為參照進行比例適配的，且架構組已經定義了一套適配相關常量，傳px進去不太方便，所以需要對flutter_screenutil進行擴展
公司設計圖是以iPhone X的尺寸提供的即物理設備尺寸為375x812，像素比例為750x1624,像素密度比為2
初始化仍用px來初始化
ScreenUtil.init(width: 750, height: 1624);
dart sdk 2.7正式支持extension-method，即為已有類擴展方法，從 flutter_screenutil 這種540.w寫法點進去，我們可以看到
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類擴展了一系列簡寫方法，那我們當然可以按照它這種方式進行擴展
/// 設計圖像素密度比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來擴展方法，需要Dart sdk最低版本為2.6，否則會報錯:
This requires the 'extension-methods' experiment to be enabled.
網上提供的解決方案：
第一步：修改 pubspec.yaml
environment:
sdk: ">=2.6.0 <3.0.0"
第二步：執行flutter pub get
第三步：重啟 AndroidStudio
- 賦值報錯
Container(
padding: const EdgeInsets.only(10.zW),
child: Row(),
)
Arguments of a constant creation must be constant expressions.
解決方案：去掉const即可
參考文章
UI設計中px、pt、ppi、dpi、dp、sp之間的關系
Dart/Flutter - 擴展方法(ExtensionMethod)
