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;
  }
}

使用方式:

// 设置文本大小 30 为设计图尺寸
new Text(
    'Hello World!',
    style: TextStyle(
         fontSize: Adapt.px(30),
     )
)
讨论数量: 2

不错,不错。

4年前 评论

在release模式下使用mediaQuery需要注意重复获取设备信息,刚开始可能为零

4年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!