Flutter 屏幕适配

一、概述

对于Flutter开发来说，除了需要满足Android和IOS风格样式之外，我们首先需要考虑的就是开发出原型图设计的样式效果，所以我们首先要做的就是屏幕适配。

二、原理

参照flutter_screenUtil的原理设置，我们需要做的就是在每一台设备上把原型图上的尺寸等比例放大缩小就可以了，所以基本的设计原理就是：
开发尺寸/原型图尺寸=实际屏幕宽度/原型图屏幕宽度

三、实现

首先获取必须的数据

    static const double _defaultWidth = 750;  // UI 设计图的宽度
    static const double _defaultHeight = 1334; // UI 设计图的高度
    _mediaQueryData = MediaQuery.of(context);
    _screenWidth = _mediaQueryData.size.width;//屏幕实际宽度
    _screenHeight = _mediaQueryData.size.height;//屏幕实际高度
    _pixelRatio = _mediaQueryData.devicePixelRatio;//屏幕像素
    _rpx = _screenWidth / _defaultWidth;
    static num setPx(num size) => _rpx * size;

这样最基本的设计思想就实现了。

四、扩展

除了等比例设计外，我们还可以通过设备像素来定义宽度百分比、长度百分比单位等，意思字体大小的设计（字体大小与原型图设计之间的转换不能单纯等比例设计），代码如下：

import 'package:flutter/material.dart';

class SizeUtil {
  SizeUtil._();

  static MediaQueryData _mediaQueryData;

  /// UI 设计图的宽度
  static const double _defaultWidth = 750;

  /// UI 设计图的高度
  static const double _defaultHeight = 1334;

  static num _uiWidthPx;
  static num _uiHeightPx;

  /// 屏幕宽度(dp)
  static double _screenWidth;

  /// 屏幕高度(dp)
  static double _screenHeight;

  /// 设备像素密度
  static double _pixelRatio;

  /// 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
  static double _textScaleFactor;

  static bool _allowFontScaling;

  static double _px;

  static double _rpx;

  static void initialize(BuildContext context,
      {double standardWidth = _defaultWidth,
      double standardHeight = _defaultHeight,
      bool allowFontScaling = false}) {
    _uiWidthPx = standardWidth;
    _uiHeightPx = standardHeight;

    _mediaQueryData = MediaQuery.of(context);
    _screenWidth = _mediaQueryData.size.width;
    _screenHeight = _mediaQueryData.size.height;

    _pixelRatio = _mediaQueryData.devicePixelRatio;

    _textScaleFactor = _mediaQueryData.textScaleFactor;

    _allowFontScaling = allowFontScaling;
    _rpx = _screenWidth / _uiWidthPx;
    _px= _screenHeight / _uiHeightPx * 2;
  }

  /// 每个逻辑像素的字体像素数，字体的缩放比例
  static double get textScaleFactor => _textScaleFactor;

  static double get pixelRatio => _pixelRatio;

  static double get screenWidth => _screenWidth;

  static double get screenHeight => _screenHeight;

  /// 设备宽度 px
  static double get screenWidthPx => _screenWidth * _pixelRatio;

  /// 设备高度 px
  static double get screenHeightPx => _screenHeight * _pixelRatio;

  /// 实际的dp与UI设计px的比例
  static double get scaleWidth => _screenWidth / _uiWidthPx;

  static double get scaleHeight => _screenHeight / _uiHeightPx;

  static double get scaleText => scaleWidth;

  static num setPx(num size) => _rpx * size * 2;//原型图像素为*2，所以这里需要扩大2倍

  static num setRpx(num size) => _px * size;

  static num setWidth(num size) => size * scaleWidth;

  static num setHeight(num size) => size * scaleHeight;

  static num setSp(num size, {bool allowFontScalingSelf}) =>
      allowFontScalingSelf == null
          ? (_allowFontScaling
              ? (size * scaleText)
              : ((size * scaleText) / _textScaleFactor))
          : (allowFontScalingSelf
              ? (size * scaleText)
              : ((size * scaleText) / _textScaleFactor));

  static num setWidthPercent(int percent) => (_screenWidth * percent) / 100;

  static num setHeightPercent(int percent) => (_screenHeight * percent) / 100;
}

extension NumExtensions on num {
  num get px => SizeUtil.setPx(this);

  num get rpx => SizeUtil.setRpx(this);

  num get w => SizeUtil.setWidth(this);

  num get h => SizeUtil.setHeight(this);

  num get sp => SizeUtil.setSp(this, allowFontScalingSelf: false);

  num get asp => SizeUtil.setSp(this, allowFontScalingSelf: true);

  num get wp => SizeUtil.setWidthPercent(this);

  num get hp => SizeUtil.setHeightPercent(this);
}