Flutter屏幕适配（自适应）方案

现代手机屏幕尺寸各不相同，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同。

为了达到一套代码所有手机体验一致效果，需要做尺寸上的适配。

适配方案：
计算公式：实际尺寸 = 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;
    }
}

　　

 

解析：

1、默认750设计图

2、引入 'dart:ui' 获得屏幕尺寸相关信息

3、计算真实像素值

使用方式：
// 设置文本大小 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())),
    ),
)

　　

 

Adapt.px(100) 计算适配后的尺寸
Adapt.onepx() 1px像素大小