Flutter-阿里P7告訴我的螢屏適配終極方案！！！

前言：我相信每個移動端開發者都避不開這個問題，就是螢屏適配

目前移動端的設備已經非常多，并且不同的設備手機螢屏也不相同，

目前做移動端開發都要針對不同的設備進行一定的適配，無論是移動原生開發、小程式、H5頁面，

所以這篇文章咱們來講講螢屏適配，阿里P7告訴我的適配方案！

最最最重要的一點：寬度一般根據螢屏寬度算 高度看情況 文字按UI的來 高度不限制！！！

多使用Expanded這樣自適應的組件！！

我們可以根據設備資訊來進行適配：

獲取螢屏上的一些資訊，可以通過MediaQuery：

// 1.媒體查詢資訊
final mediaQueryData = MediaQuery.of(context);

// 2.獲取寬度和高度
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final physicalWidth = window.physicalSize.width;
final physicalHeight = window.physicalSize.height;
final dpr = window.devicePixelRatio;
print("螢屏width:$screenWidth height:$screenHeight");
print("解析度: $physicalWidth - $physicalHeight");
print("dpr: $dpr");

// 3.狀態欄的高度
// 有劉海的螢屏:44 沒有劉海的螢屏為20
final statusBarHeight = mediaQueryData.padding.top;
// 有劉海的螢屏:34 沒有劉海的螢屏0
final bottomHeight = mediaQueryData.padding.bottom;
print("狀態欄height: $statusBarHeight 底部高度:$bottomHeight");

咱們有兩種適配方式：

1，自己根據設備資訊組裝，這樣可以更好的實作自己需要的功能

2，使用第三方庫：flutter_screenutil（功能也很強大，主要使用很方便）

咱們兩種方式都講一講，哈哈

1，自己根據設備資訊組裝

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

class ScreenAdapt {
  //螢屏引數獲取api
  static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
  static double screenwidth; //設備螢屏寬度width
  static double screenheight; //設備螢屏高度height
  static double topheight; //頂部空白高度
  static double bottomheight; //底部空白高度
  static double devicepixelratio = mediaQuery.devicePixelRatio; //分辨比
  static var screenratio; //螢屏寬比
  //初始化  uinumber：UI設計圖 比如750、1920等
  static initialize(int uinumber) {
    screenwidth = mediaQuery.size.width;
    screenheight = mediaQuery.size.height;
    int uiwidth = uinumber is int ? uinumber : 750; //默認是1920 ui設計圖
    screenratio = screenwidth / uiwidth; //螢屏寬比  設備寬度 : ui設計圖寬度
  }

  //實際填寫長度
  static px(number) {
    if (!(screenratio is double || screenratio is int)) {
      ScreenAdapt.initialize(750);
    }
    return number * screenratio; //回傳處理好的長度數值
  }

  //獲取設備螢屏寬度
  static screenWidth() {
    screenwidth = mediaQuery.size.width;
    return screenwidth;
  }

  //獲取設備螢屏高度
  static screenHeight() {
    screenheight = mediaQuery.size.height;
    return screenheight;
  }

  //獲取設備頂部空白高度
  static topHeight() {
    topheight = mediaQuery.padding.top;
    return topheight;
  }

  //獲取設備底部空白高度
  static bottomHeight() {
    bottomheight = mediaQuery.padding.bottom;
    return bottomheight;
  }
}

使用實體

Container(
              width: ScreenAdapt.px(1500),
              //height: ScreenAdapt.px(800),盡量不去設定高度
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(23.0),
                  image: DecorationImage(
                      image: new NetworkImage(
                          "https://i.henghajiang.com/login_img.png"),
                      fit: BoxFit.none)),
            ),

注意一點，這里的長寬分別指什么哦

這個封裝比較簡單，大家可以自己diy

2，使用第三方庫：flutter_screenutil

（1）引入步驟：

? pubspec.yaml中引入最新的：

? flutter_screenutil: ^5.0.0 #螢屏適配 (這個版本功能完全夠用)

（2）初始化：

? 一定是要在State的build中初始化

在4.0.0之前的版本呢初始化時這樣的：

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

之后呢是這樣的：

ScreenUtil.init(
  BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width,
      maxHeight: MediaQuery.of(context).size.height),
  designSize: Size(750, 1334),
);

(3) 使用方式

dart版本2.0.0之前：

Container(
  width:ScreenUtil().setWidth(200)
  height:ScreenUtil().setHeight(180)
}

dart版本2.0.0之后（包括2.0.0）：

Container(
  width:200.w
  height:180.h
}

長寬相等：

Container(
  width:200.w
  height:200.w
)

其他的api：

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

是不是很簡單！記住這句話：寬度一般根據螢屏寬度算 高度看情況 文字按UI的來 高度不限制！！！

配合自適應組件，完美適配螢屏！！

歡迎留言糾正 ~ 不妨給個點贊哈哈

我是阿T一個幽默的程式員 我們下期再見~

添加我為你的好友，領取原始碼以及Flutter學習資料~

加入我們吧，一起學習，一起進步~