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像素⼤⼩