原理

UI設計的時候一般會按照一個固定的尺寸進行設計，如 360 x 690 ，實際設備分辨率可能是 Google Pixel: 1080 x 1920 、Google Pixel XL: 1440 x 2560 、iPhone 12 Pro Max: 1284 x 2778 等等。開發(fā)時如果直接按照設計圖寫死數(shù)值則會出現(xiàn)最后實現(xiàn)的效果跟設計效果不一致的情況。這個時候就可以用比例的方式來進行適配。

將設計圖分為固定單位并給這個單位定義一個標識，例如就叫 w，然后通過獲取設備分辨率，使用設備真實寬度除以設計圖寬度 ，就得到了 1w 代表的真實寬度:

1w = 設備真實寬度 / 設計圖寬度

如設計圖尺寸是 360 x 690 ，則寬度為 360w ，真實設備寬度為 1080 則 1w = 1080 / 360 = 3。

根據(jù)上面的算法，得到對應設備的 1w 的真實寬度：

Google Pixel: 1w = 1080 / 360 = 3

Google Pixel XL： 1w = 1440 / 360 = 4

iPhone 12 Pro Max： 1w = 1284 / 360 = 3.57

按照同樣的算法，可以給高度定義一個單位為 h , 得出對應設備的高度單位的真實值，如下：

Google Pixel: 1h = 1920 / 690 = 2.78

Google Pixel XL： 1h = 2560 / 690 = 3.71

iPhone 12 Pro Max： 1h = 2778 / 690 = 4.03

得到換算以后 w、h 的真實值以后，開發(fā)過程中就可以使用其來設置 UI 控件的高、寬、間距等，使其最終呈現(xiàn)的效果無限接近設計圖的效果。

開發(fā)過程中一般采用寬度來進行適配，控件高度要么自適應，要么也設置寬度的單位，然后整體高度根據(jù)內(nèi)容自適應。但是如果有特殊需求也可以使用高度來進行適配，比如需求要求是 banner 占屏幕的 1/4 ，或者要求內(nèi)容剛好一屏顯示，這個時候設置控件的高度時就可以采用高度單位來進行適配。

基于上面的算法，在項目中就可以實現(xiàn)對應的適配方案了，但本著不重復造輪子的思想，項目開發(fā)中可以直接使用 flutter_screenutil 這個適配庫。

推薦方法

直接使用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提供的方法獲取到適配后的數(shù)值進行使用了。

可以通過如下的api獲取寬高以及字體的適配數(shù)值。

ScreenUtil().setWidth(540)  //根據(jù)屏幕寬度適配尺寸
ScreenUtil().setHeight(200) //根據(jù)屏幕高度適配尺寸(一般根據(jù)寬度適配即可)
ScreenUtil().radius(200)    //根據(jù)寬度或高度中的較小者進行調(diào)整
ScreenUtil().setSp(24)      //字體大小適配

傳入的參數(shù)即為設計圖上的大小。在實際使用中的示例如下：

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：取數(shù)值本身和sp的值較小的值，如：12.sm則取12和12.sp的值進行比較，取較小的值。

sw：screen width的縮寫，表示的是屏幕寬度，作用是按照屏幕寬度比例返回值。如0.2sw則返回屏幕寬度的20%，1.sw則是整個屏幕寬度

sh：screen height的縮寫，即屏幕高度，作用于sw類似，返回指定比例的屏幕高度值。如1.sh為整個屏幕的高度。

使用sp作為字體單位，默認是會隨著系統(tǒng)字體縮放進行變化的，如果不想讓字體隨著系統(tǒng)的縮放進行變化，可以設置textScaleFactor為1.0來實現(xiàn)。項目中可對MaterialApp進行全局設置，或者對Text進行單獨的設置。

全局設置：

MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter_ScreenUtil',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        builder: (context, widget) {
          return MediaQuery(
            ///設置文字大小不隨系統(tǒng)設置改變
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: widget,
          );
        },
        home: HomePage(title: 'FlutterScreenUtil Demo'),
      ),

單獨設置：

Text("text", textScaleFactor: 1.0)

到此這篇關于Flutter應用框架搭建實現(xiàn)屏幕適配方案詳解的文章就介紹到這了,更多相關Flutter屏幕適配內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論