Flutter屏幕适配(自适应)方案
现代手机屏幕尺寸各不相同,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同。
为了达到一套代码所有手机体验一致效果,需要做尺寸上的适配。
适配方案:
计算公式:实际尺寸 = UI尺寸 * 设备宽度/设计图宽度
1px方案 : 1px = 1 / 设备像素比
实现代码如下(以750设计图为例):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | 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 为设计图尺寸
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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像素大小
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2019-01-08 pyglet player sound
2019-01-08 文件打开的几种访问模式