Flutter-阿里P7告诉我的屏幕适配终极方案!!!
前言:我相信每个移动端开发者都避不开这个问题,就是屏幕适配
目前移动端的设备已经非常多,并且不同的设备手机屏幕也不相同。
目前做移动端开发都要针对不同的设备进行一定的适配,无论是移动原生开发、小程序、H5页面。
所以这篇文章咱们来讲讲屏幕适配,阿里P7告诉我的适配方案!
最最最重要的一点:宽度一般根据屏幕宽度算 高度看情况 文字按UI的来 高度不限制!!!
多使用Expanded这样自适应的组件!!
我们可以根据设备信息来进行适配:
获取屏幕上的一些信息,可以通过MediaQuery:
// 1.媒体查询信息
final mediaQueryData = MediaQuery.of(context);// 2.获取宽度和高度
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final physicalWidth = window.physicalSize.width;
final physicalHeight = window.physicalSize.height;
final dpr = window.devicePixelRatio;
print("屏幕width:$screenWidth height:$screenHeight");
print("分辨率: $physicalWidth - $physicalHeight");
print("dpr: $dpr");// 3.状态栏的高度
// 有刘海的屏幕:44 没有刘海的屏幕为20
final statusBarHeight = mediaQueryData.padding.top;
// 有刘海的屏幕:34 没有刘海的屏幕0
final bottomHeight = mediaQueryData.padding.bottom;
print("状态栏height: $statusBarHeight 底部高度:$bottomHeight");
咱们有两种适配方式:
1,自己根据设备信息组装,这样可以更好的实现自己需要的功能
2,使用第三方库:flutter_screenutil(功能也很强大,主要使用很方便)
咱们两种方式都讲一讲,哈哈
1,自己根据设备信息组装
import 'package:flutter/material.dart';
import 'dart:ui';class ScreenAdapt {//屏幕参数获取apistatic MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);static double screenwidth; //设备屏幕宽度widthstatic double screenheight; //设备屏幕高度heightstatic double topheight; //顶部空白高度static double bottomheight; //底部空白高度static double devicepixelratio = mediaQuery.devicePixelRatio; //分辨比static var screenratio; //屏幕宽比//初始化 uinumber:UI设计图 比如750、1920等static initialize(int uinumber) {screenwidth = mediaQuery.size.width;screenheight = mediaQuery.size.height;int uiwidth = uinumber is int ? uinumber : 750; //默认是1920 ui设计图screenratio = screenwidth / uiwidth; //屏幕宽比 设备宽度 : ui设计图宽度}//实际填写长度static px(number) {if (!(screenratio is double || screenratio is int)) {ScreenAdapt.initialize(750);}return number * screenratio; //返回处理好的长度数值}//获取设备屏幕宽度static screenWidth() {screenwidth = mediaQuery.size.width;return screenwidth;}//获取设备屏幕高度static screenHeight() {screenheight = mediaQuery.size.height;return screenheight;}//获取设备顶部空白高度static topHeight() {topheight = mediaQuery.padding.top;return topheight;}//获取设备底部空白高度static bottomHeight() {bottomheight = mediaQuery.padding.bottom;return bottomheight;}
}
使用实例
Container(width: ScreenAdapt.px(1500),//height: ScreenAdapt.px(800),尽量不去设置高度decoration: BoxDecoration(borderRadius: BorderRadius.circular(23.0),image: DecorationImage(image: new NetworkImage("https://i.henghajiang.com/login_img.png"),fit: BoxFit.none)),),
注意一点,这里的长宽分别指什么哦
这个封装比较简单,大家可以自己diy
2,使用第三方库:flutter_screenutil
(1)引入步骤:
pubspec.yaml中引入最新的:
flutter_screenutil: ^5.0.0 #屏幕适配 (这个版本功能完全够用)
(2)初始化:
一定是要在State的build
中初始化
在4.0.0之前的版本呢初始化时这样的:
ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);
之后呢是这样的:
ScreenUtil.init(BoxConstraints(maxWidth: MediaQuery.of(context).size.width,maxHeight: MediaQuery.of(context).size.height),designSize: Size(750, 1334),
);
(3) 使用方式
dart版本2.0.0之前:
Container(width:ScreenUtil().setWidth(200)height:ScreenUtil().setHeight(180)
}
dart版本2.0.0之后(包括2.0.0):
Container(width:200.wheight:180.h
}
长宽相等:
Container(width:200.wheight:200.w
)
其他的api:
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例
是不是很简单!记住这句话:宽度一般根据屏幕宽度算 高度看情况 文字按UI的来 高度不限制!!!
配合自适应组件,完美适配屏幕!!
欢迎留言纠正 ~ 不妨给个点赞哈哈
我是阿T一个幽默的程序员 我们下期再见~
添加我为你的好友,领取源码以及Flutter学习资料~
加入我们吧,一起学习,一起进步~
Flutter-阿里P7告诉我的屏幕适配终极方案!!!相关推荐
- 今日头条屏幕适配终极解决方案,很实用
热文导读| 点击标题阅读 互联网寒冬下,程序员如何突围提升自己? 腾讯新开源一吊炸天神器-零反射全动态Android插件框架正式开源 Flutter:究竟是大势所趋还是昙花一现? 作者:但,我知道 ...
- 记录一个屏幕适配的方案。
manifest文件中添加, gradle添加 implementation 'me.yatoooon:screenadaptation:1.0.8' <meta-dataandroid:nam ...
- 淘宝App 华为折叠屏适配终极方案!
点击"开发者技术前线",选择"星标????" 13:21 在看|星标|留言, 真爱 来源:淘系技术 华为 5G 新品发布会上,Mate X 正式亮相,淘宝也作 ...
- 在webpack和vue-cli上的rem适配终极方案
https://blog.csdn.net/a546598185/article/details/79917193?utm_source=blogxgwz6 转载于:https://www.cnblo ...
- (转)webapp兼容移动端的屏幕适配
亲测可用!!!! 屏幕适配终极方案 <meta name="viewport" content="width=你的基准像素, user-scalable=no&qu ...
- cocos2d-x lua 屏幕适配
转载请注明原文地址:https://segmentfault.com/a/1190000000635287 研究了两天屏幕适配,了解了Cocos提供的屏幕适配的方案有下面几种: 1, EXACT_FI ...
- Android屏幕适配概论:
参考简书: https://www.jianshu.com/p/ec5a1a30694b # 概念: dip:Density Independent Pixels(密度无关像素)的缩写.以160dpi ...
- Android学习屏幕适配技能包
屏幕适配 序言 相关重要概念 硬件 屏幕尺寸 像素密度ppi 分辨率 软件 密度 像素密度dpi 密度限定符 密度无关像素 比例无关像素 屏幕适配的原因 解决方案 今日头条适配方案 宽高限定符适配方案 ...
- 移动端屏幕适配原理以及方法讲解
序言: 今天周日,我正坐在黄埔区图书馆,思索着关于移动端屏幕适配的问题.作为一名年纪轻轻的前端马蓉,不,是码农,移动端屏幕适配的方案的帖子没读过100篇吧,也读过几十篇了.可是今天我又在思考这个问题了 ...
最新文章
- K-均值聚类(K-Means) C++代码实现
- android launcher3源码分析,Android Launcher3源码分析与修改
- OpenCV神经网络ANN代码编译运行与解读(二)
- Facebook欧盟垄断案陷入灰色地带 立法或调整
- 为什么我的电脑输入法的图标和原来的活动窗口离得那么远
- JSP EL表达式 将数组拼接成字符串
- python 队列与栈的实现
- 蓝桥杯2017初赛-迷宫-dfs
- 关于toString()与toLocaleString()的区别
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
- iPad Air/Air2/iPhone6 Plus跑分对比
- Puppet安装与配置简介(附视频教程)
- 嵌入式系统——软件开发模型
- 获取System.__ComObject的真正类型
- VC 2010下安装OpenCV2.4.4(来自wiki)
- 单片机12864c语言,51单片机+带字库液晶12864+DS1302数字时钟C源程序
- rufus下载包,exsi自启动制作工具
- Ubuntu 14.04 引导修复(Boot Repair)(双系统修复一)
- 面试官,不要再问我三次握手和四次挥手
- 量子计算机窦文涛,中国式浪漫,美到哭泣!
热门文章
- python pywinauto 单击鼠标_教你快速用 Python 控制键盘和鼠标,彻底解放双手
- 安卓万能播放器aar
- 我的战神K650D i5 D1
- 达人篇:1)简单易懂的质量管理-写在达人篇开篇
- 前端面试题全集(html+CSS)
- 鸿蒙×运动健康丨数字为运动蓄能,智能为健康充值
- 学计算机网路的感想,【必备】网络培训心得体会四篇
- 【Galois工具开发之路】给你的JVM安装一个插件~
- DevExpress中GridView的日期编辑器RepositoryItemDateEdit属性VistaCalendarViewStyle失效问题
- 大众点评店铺信息和评论内容的抓取