汪微的博客
zane,做一个有思维的开发者

汪微的博客

Flutter屏幕适配(自适应)方案

2018年12月19日690 browse

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

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

适配方案:

计算公式:实际尺寸 = 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像素大小



博主 zane 发表于 2018-12-19 10:57:46,添加在了 Flutter 标签下

打赏

您的支持将鼓励我继续努力与分享。

扫码打赏,建议金额1-10元

提醒:打赏金额将直接进此方账号,无法退款,请您谨慎操作。

评论

正在加载验证码......

提交

222

2019-03-28 18:09:50

在release下,返回为0,release模式下dart速度快,还没获取到设备信息。

2019-01-31 15:47:44

👍

2019-01-31 15:22:08