Flutter-阿里P7告诉我的屏幕适配终极方案！！！

Posted 2021-08-31 阿 T

前言：我相信每个移动端开发者都避不开这个问题，就是屏幕适配

目前移动端的设备已经非常多，并且不同的设备手机屏幕也不相同。

目前做移动端开发都要针对不同的设备进行一定的适配，无论是移动原生开发、小程序、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学习资料~

加入我们吧，一起学习，一起进步~