Flutter 屏幕適配

一逛尚、概述

對于Flutter開發(fā)來說鹏倘，除了需要滿足Android和IOS風(fēng)格樣式之外，我們首先需要考慮的就是開發(fā)出原型圖設(shè)計的樣式效果嘹害，所以我們首先要做的就是屏幕適配撮竿。

二、原理

參照flutter_screenUtil的原理設(shè)置吼拥，我們需要做的就是在每一臺設(shè)備上把原型圖上的尺寸等比例放大縮小就可以了倚聚，所以基本的設(shè)計原理就是：
開發(fā)尺寸/原型圖尺寸=實際屏幕寬度/原型圖屏幕寬度

三、實現(xiàn)

首先獲取必須的數(shù)據(jù)

    static const double _defaultWidth = 750;  // UI 設(shè)計圖的寬度
    static const double _defaultHeight = 1334; // UI 設(shè)計圖的高度
    _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;

這樣最基本的設(shè)計思想就實現(xiàn)了凿可。

四惑折、擴展

除了等比例設(shè)計外授账，我們還可以通過設(shè)備像素來定義寬度百分比、長度百分比單位等惨驶，意思字體大小的設(shè)計（字體大小與原型圖設(shè)計之間的轉(zhuǎn)換不能單純等比例設(shè)計）白热，代碼如下：

import 'package:flutter/material.dart';

class SizeUtil {
  SizeUtil._();

  static MediaQueryData _mediaQueryData;

  /// UI 設(shè)計圖的寬度
  static const double _defaultWidth = 750;

  /// UI 設(shè)計圖的高度
  static const double _defaultHeight = 1334;

  static num _uiWidthPx;
  static num _uiHeightPx;

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

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

  /// 設(shè)備像素密度
  static double _pixelRatio;

  /// 控制字體是否要根據(jù)系統(tǒng)的“字體大小”輔助選項來進(jìn)行縮放。默認(rèn)值為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;
  }

  /// 每個邏輯像素的字體像素數(shù)屋确，字體的縮放比例
  static double get textScaleFactor => _textScaleFactor;

  static double get pixelRatio => _pixelRatio;

  static double get screenWidth => _screenWidth;

  static double get screenHeight => _screenHeight;

  /// 設(shè)備寬度 px
  static double get screenWidthPx => _screenWidth * _pixelRatio;

  /// 設(shè)備高度 px
  static double get screenHeightPx => _screenHeight * _pixelRatio;

  /// 實際的dp與UI設(shè)計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);
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者