Flutter應(yīng)用框架搭建屏幕適配的方法

本篇內(nèi)容主要講解“Flutter應(yīng)用框架搭建屏幕適配的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Flutter應(yīng)用框架搭建屏幕適配的方法”吧!

因移動設(shè)備的多樣性，特別是 Android 的碎片化嚴(yán)重，存在各種各樣的分辨率，而 Flutter 跨平臺開發(fā)又需同時支持 Android 和 iOS ，為盡可能的還原設(shè)計圖效果提升用戶體驗(yàn)，屏幕適配就勢在必行了。

Flutter 暫時沒有官方的屏幕適配方案，在 Flutter 項目開發(fā)中目前大部分的適配方案都是通過比例來進(jìn)行適配，是一個通用的適配方法，該適配方法也在前端、Android、iOS、小程序等開發(fā)中廣泛使用。

原理

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

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

1w = 設(shè)備真實(shí)寬度 / 設(shè)計圖寬度

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

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

Google Pixel: 1w = 1080 / 360 = 3

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

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

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

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 的真實(shí)值以后，開發(fā)過程中就可以使用其來設(shè)置 UI 控件的高、寬、間距等，使其最終呈現(xiàn)的效果無限接近設(shè)計圖的效果。

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

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

flutter_screenutil

flutter_screenutil 就是基于上述比例適配原理而實(shí)現(xiàn)的屏幕適配庫。 目前最新版本是 5.0.1，在 GitHub 上擁有 2.8k 的 star 。在 pub.dev 上擁有1536 個 like ，130 的 pub 指數(shù)， 99% 的人氣，說明這是一個靠譜的輪子。

flutter_screenutil：讓你的UI在不同尺寸的屏幕上都能顯示合理的布局!

添加依賴

在項目根目錄的 pubspec.yaml 中添加 flutter_screenutil 的依賴：

dependencies:
  flutter:
    sdk: flutter
  # 添加依賴
  flutter_screenutil: ^5.0.1

初始化

flutter_screenutil 提供了兩種方式進(jìn)行初始化：ScreenUtilInit 方式和 ScreenUtil.init 方式。首先在使用的地方導(dǎo)入包：

import 'package:flutter_screenutil/flutter_screenutil.dart';

ScreenUtilInit

使用 ScreenUtilInit 方式進(jìn)行初始化，需要將項目的 MaterialApp 進(jìn)行一層包裹，然后在 builder 中返回項目本身的 MaterialApp ，在 ScreenUtilInit 的 designSize 參數(shù)中傳入設(shè)計圖的尺寸，實(shí)現(xiàn)如下：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), //傳入設(shè)計圖尺寸
      builder: () => MaterialApp(
        ...
      ),
    );
  }
}

ScreenUtil.init

直接使用 ScreenUtil.init 方法，傳入屏幕尺寸、設(shè)計圖尺寸和屏幕方向即可對 flutter_screenutil 進(jìn)行初始化，代碼如下：

ScreenUtil.init(
  BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width,  //屏幕寬度
    maxHeight: MediaQuery.of(context).size.height, //屏幕高度
  ),
  designSize: const Size(360, 690), // 設(shè)計圖尺寸
  orientation: Orientation.portrait); // 屏幕方向

使用這種方式只需在使用 flutter_screenutil 前進(jìn)行初始化即可，一般放在根路由即第一個頁面加載的時候進(jìn)行初始化。

注意：ScreenUtil.init 不能在 MyApp 中進(jìn)行初始化，會報如下錯誤 No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets. 因?yàn)檫@個時候還沒加載 MaterialApp 無法使用 MediaQuery.of(context ) 獲取到屏幕寬高

關(guān)于上面兩種初始化方法，flutter_screenutil 作者推薦使用第二種方式。

使用

初始化以后就可以使用 flutter_screenutil 提供的方法獲取到適配后的數(shù)值進(jìn)行使用了。

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

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

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

Container(
  width: ScreenUtil().setWidth(200),
  height: ScreenUtil().setHeight(540),
  child: Text("Hello", style: TextStyle(fontSize: ScreenUtil().setSp(24)),),
);

這樣即可使用適配的數(shù)值進(jìn)行開發(fā)。

但發(fā)現(xiàn)這樣寫太麻煩了，為了獲取一個適配的數(shù)值，要寫一串的很長的代碼。flutter_screenutil 提供了更簡潔的調(diào)用方法，使用 Dart 擴(kuò)展為 num 類型擴(kuò)展了一系列屬性可以方便開發(fā)者調(diào)用，上面的 api 可以通過擴(kuò)展屬性進(jìn)行如下轉(zhuǎn)換：

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),),
);

這樣就簡潔多了。

注意：根據(jù)前面講解的適配原理知道，一般情況下 1.w != 1.h ，除非剛好屏幕分辨率比例與設(shè)計圖比例一致，所以如果要設(shè)置正方形，切記使用相同的單位，如都設(shè)置相同的 w 或者 h ，否則可能顯示為長方形。

除了上面 4 種擴(kuò)展屬性以外，還提供了 sm 以及 sw、 sh

• sm ：取數(shù)值本身與 sp 的值最小的值，如 12.sm 則取 12 與 12.sp 的值進(jìn)行比較，取最小的值。

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

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

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

全局設(shè)置：

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

Text 單獨(dú)設(shè)置：

Text("text", textScaleFactor: 1.0)

效果

附上官方效果圖：

其他 Api

除了適配的 api 以外，flutter_screenutil 還提供了很多實(shí)用的 api ，如下 ：

• ScreenUtil().pixelRatio ：設(shè)備的像素密度

• ScreenUtil().screenWidth ：屏幕寬度，等同于 1.sw

• ScreenUtil().screenHeight ：屏幕高度，等同于 1.sh

• ScreenUtil().bottomBarHeight ：底部導(dǎo)航高度，如全屏底部按鍵的高度

• ScreenUtil().statusBarHeight ：狀態(tài)欄高度

• ScreenUtil().textScaleFactor ：系統(tǒng)字體縮放比例

• ScreenUtil().scaleWidth ：實(shí)際寬度與設(shè)計圖寬度的比例

• ScreenUtil().scaleHeight ：實(shí)際高度與設(shè)計圖高度的比例

• ScreenUtil().orientation ：屏幕方向

到此，相信大家對“Flutter應(yīng)用框架搭建屏幕適配的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！