Flutter 螢屏適配-有解無憂

志當存高遠，——諸葛亮

螢屏尺寸大全

選單欄共有5個選項，包括手機、平板、手表、電腦、顯示幕，分別顯示螢屏尺寸、PPI、縱橫比、dp和px 單位下的寬?高，以及DPI，

官方設計規范

適配原理

螢屏尺寸

嚴格來說，螢屏尺寸實際被物理尺寸和顯示解析度兩個部分定義，而我們今天對各類手機、Pad 設備所說的螢屏尺寸，只指物理尺寸，如果一塊手機螢屏的物理尺寸是 5.0 英寸，即是指該手機螢屏對角線的長度，

螢屏解析度

螢屏解析度是指螢屏影像的精密度，是顯示幕所能顯示的像素的具體數值，如一個手機標稱解析度是 400 x 800，即表示螢屏橫向由 400 個像素點組成，縱向由 800 個像素點組成，由于螢屏上的點、線和面都是由像素組成的，螢屏具備的像素點越多，畫面就越精細，解析度越高，單位面積內顯示的資訊就越多，我們能看到的內容就越多，

螢屏比例

螢屏比例是指螢屏的寬度與高度的比例，今天更多指解析度的比例，即
螢屏比例 = 螢屏橫向解析度 / 螢屏縱向解析度
此外，在各類設備、平臺之間也有一些比較常用的比例，同時也推薦大家在開發對應設定或平臺的應用時使用推薦比例，
使用推薦比例可以讓用戶在使用我們的 App 時更舒適，帶來更好的使用體驗，

DPI
DPI（Dots Per Inch），每英寸所擁有的點數，原用于列印機、滑鼠的精確度指標，
在螢屏方面一般使用 PPI 來表示精度，

PPI
PPI（Pixels Per Inch），每英寸所擁有的像素數，螢屏的 PPI 越高，表示螢屏中的每個像素點之間的距離越接近，像素的密度越高，這樣螢屏內容看起來就更加細膩、真實，
而當 PPI 超過 300 時，螢屏被認為達到了視網膜級別，一般情況下人眼已經較難察覺 300 以上 PPI 之間的差別，

螢屏密度（Density）
Density 由 Android 1.6 版本（Android API Level 4）為了適配不同大小的螢屏而提出，表示每英寸有多少個顯示點(邏輯值)，它的單位是 DPI，
在 Android 原生開發中，常常使用 dp/dip/sp 等單位來定義視圖、文字的寬高
理論上當 Density 的值為 160 DPI 時，1px = 1dp，當前螢屏的 Density 為 320 DPI 時，2px = 1dp

倍率DPR(devicePixelRatio)

有的地方也叫設備像素比，是設備像素dp和設備獨立像素dips的比例，
也就是dpr = dp / dips

邏輯解析度
邏輯解析度在 APICloud 應用中也可以被當做顯示解析度使用，
邏輯解析度與螢屏解析度在當今的主流設備中是不相同的，公式為：
邏輯解析度 = 螢屏解析度 / 螢屏倍率
在 Android 系統中，根據 DP 的定義 1dp = 1px 時， Density 為 160，可知公式為：
Android 螢屏倍率 = Density / 160
如 iPhone 4 的螢屏解析度為 640 x 960，邏輯解析度為：
640 / 2 x 960 / 2 = 320 x 480
而小米 2 的螢屏解析度為 720 x 1280，Density 為 320，邏輯解析度為：
720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640

螢屏適配（自適應）方案

現代手機螢屏尺寸各不相同，導致我們平時寫布局的時候會在個不同的移動設備上顯示的效果不同，為了達到一套代碼所有手機體驗一致效果，需要做尺寸上的適配，

計算公式：實際尺寸 = UI尺寸 * 設備寬度/設計圖寬度

1px方案 : 1px = 1 / 設備像素比

750設計圖為例

import 'package:flutter/material.dart';
import 'dart:ui';

class Adapt {
    static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
    static double _width = mediaQuery.size.width;
    static double _height = mediaQuery.size.height;
    static double _topbarH = mediaQuery.padding.top;
    static double _botbarH = mediaQuery.padding.bottom;
    static double _pixelRatio = mediaQuery.devicePixelRatio;
    static var _ratio;
    static init(int number){
        int uiwidth = number is int ? number : 750;
        _ratio = _width / uiwidth;
    }
    static px(number){
        if(!(_ratio is double || _ratio is int)){Adapt.init(750);}
        return number * _ratio;
    }
    static onepx(){
        return 1/_pixelRatio;
    }
    static screenW(){
        return _width;
    }
    static screenH(){
        return _height;
    }
    static padTopH(){
        return _topbarH;
    }
    static padBotH(){
        return _botbarH;
    }
}

// 設定文本大小 30 為設計圖尺寸
new Text(
    'Hello World!',
    style: TextStyle(
         fontSize: Adapt.px(30),
     )
)

// 容器尺寸大小設定 一個設計圖為 300*300像素的容器
new Container(    width: Adapt.px(300),  
    height: Adapt.px(300),
)

// 1px 
new Container(
    decoration: new BoxDecoration(
          border: new Border(bottom:BorderSide(width: Adapt.one())),
    ),
)

螢屏適配方案插件-完美解決螢屏適配

插件地址

添加依賴

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

屬性	型別	默認值	描述
width	int	1080px	設計稿中設備的寬度,單位px
height	int	1920px	設計稿中設備的高度,單位px
allowFontScaling	bool	false	設定字體大小是否根據系統的“字體大小”輔助選項來進行縮放

初始化

@override
Widget build(BuildContext context) {
  ScreenUtil.init(context, width: 750, height: 1624, allowFontScaling: true);
}

//填入設計稿中設備的螢屏尺寸

//默認 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334) 
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//設定字體大小根據系統的“字體大小”輔助選項來進行縮放,默認為false : 字體隨著系統的“字體大小”輔助選項來進行縮放
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

適配尺寸

//長方形:
Container(
           width: ScreenUtil.getInstance().setWidth(375),
           height: ScreenUtil.getInstance().setHeight(200),
            ),
            
//如果你想顯示一個正方形:
Container(
           width: ScreenUtil.getInstance().setWidth(300),
           height: ScreenUtil.getInstance().setWidth(300),
            ),

適配字體-傳入設計稿的px尺寸

//傳入字體大小，默認不根據系統的“字體大小”輔助選項來進行縮放(可在初始化ScreenUtil時設定allowFontScaling)
ScreenUtil.getInstance().setSp(28)         
 
//傳入字體大小，根據系統的“字體大小”輔助選項來進行縮放(如果某個地方不遵循全域的allowFontScaling設定)     
ScreenUtil(allowFontScaling: true).setSp(28)        
     
//for example:

Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text('我的文字大小在設計稿上是25px，不會隨著系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                Text('我的文字大小在設計稿上是25px，會隨著系統的文字縮放比例變化',
                    style: TextStyle(
                        color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
              ],
            )

其他相關api

 ScreenUtil.pixelRatio       //設備的像素密度
    ScreenUtil.screenWidth      //設備寬度
    ScreenUtil.screenHeight     //設備高度
    ScreenUtil.bottomBarHeight  //底部安全區距離，適用于全面屏下面有按鍵的
    ScreenUtil.statusBarHeight  //狀態欄高度 劉海屏會更高  單位px
    ScreenUtil.textScaleFactory //系統字體縮放比例
    
    ScreenUtil.getInstance().scaleWidth  // 實際寬度的dp與設計稿px的比例
    ScreenUtil.getInstance().scaleHeight // 實際高度的dp與設計稿px的比例

  @override
  Widget build(BuildContext context) {
    //設定適配尺寸 (填入設計稿中設備的螢屏尺寸) 假如設計稿是按iPhone6的尺寸設計的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    
    print('設備寬度:${ScreenUtil.screenWidth}'); //Device width
    print('設備高度:${ScreenUtil.screenHeight}'); //Device height
    print('設備的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
    print(
        '底部安全區距離:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance，suitable for buttons with full screen
    print(
        '狀態欄高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px

    print('實際寬度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
    print('實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}');

    print(
        '寬度和字體相對于設計稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}'); 
    print(
        '高度相對于設計稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}'); 
    print('系統的字體縮放比例:${ScreenUtil.textScaleFactory}');

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.red,
                  child: Text(
                    '我的寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: ScreenUtil.getInstance().setSp(12),
                    ),
                  ),
                ),
                Container(
                  width: ScreenUtil.getInstance().setWidth(375),
                  height: ScreenUtil.getInstance().setHeight(200),
                  color: Colors.blue,
                  child: Text('我的寬度:${ScreenUtil.getInstance().setWidth(375)}dp',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: ScreenUtil.getInstance().setSp(12),
                      )),
                ),
              ],
            ),
            Text('設備寬度:${ScreenUtil.screenWidth}px'),
            Text('設備高度:${ScreenUtil.screenHeight}px'),
            Text('設備的像素密度:${ScreenUtil.pixelRatio}'),
            Text('底部安全區距離:${ScreenUtil.bottomBarHeight}px'),
            Text('狀態欄高度:${ScreenUtil.statusBarHeight}px'),
            Text(
              '實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            Text(
              '實際高度的dp與設計稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            Text(
              '寬度和字體相對于設計稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            Text(
              '高度相對于設計稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(100),
            ),
            Text('系統的字體縮放比例:${ScreenUtil.textScaleFactory}'),
            Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: <Widget>[
                           Text('我的文字大小在設計稿上是25px，不會隨著系統的文字縮放比例變化',
                               style: TextStyle(
                                   color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
                           Text('我的文字大小在設計稿上是25px，會隨著系統的文字縮放比例變化',
                               style: TextStyle(
                                   color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
                         ],
                       )
          ],
        ),
      ),
    );
  }

全面屏、折疊屏適配與兼容問題

一啟動白屏問題

采用Flutter 開發的app,無論Android還是Ios,都會出現白屏的現象，大概持續1-3秒，他會根據手機或模擬器的速溶而不同，時間可長可短，Flutter 應用在啟動的時候會先啟動Flutter SDK, 然后加載到記憶體里面，然后完成渲染，在這個程序中它是沒有內容可以顯示的，因此會顯示白屏.

二解決白屏問題

（1）可以在flutter專案中引入插件

https://pub.dev/packages/flutter_splash_screen