时间:2021-05-20
前言:
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,
比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配。
安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并没有适配规则,而原生的又比较繁琐,这就需要我们自己去对屏幕进行适配。
点击直达github地址
如果有帮助,请给我个star
flutter_ScreenUtil
flutter 屏幕适配方案
github: https://github.com/OpenFlutter/flutter_ScreenUtil
使用方法:
安装依赖:
安装之前请查看最新版本
dependencies: flutter: sdk: flutter # 添加依赖 flutter_screenutil: ^0.4.2在每个使用的地方导入包:
初始化设置尺寸
在使用之前请设置好设计稿的宽度和高度,传入设计稿的宽度和高度(单位px)
一定在MaterialApp的home中的页面设置(即入口文件,只需设置一次),以保证在每次使用之前设置好了适配尺寸:
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);使用:
适配尺寸:
传入设计稿的px尺寸:
根据屏幕宽度适配 width: ScreenUtil().setWidth(540),
根据屏幕高度适配 height: ScreenUtil().setHeight(200),
注意
高度也根据setWidth来做适配可以保证不变形(当你想要一个正方形的时候)
setHeight方法主要是在高度上进行适配, 在你想控制UI上一屏的高度与实际中显示一样时使用.
例如:
//长方形:Container( width: ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), ), //如果你想显示一个正方形:Container( width: ScreenUtil().setWidth(300), height: ScreenUtil().setWidth(300), ),适配字体:
其他相关api:
使用示例:
example demo
适配原理
说一下适配方案, 比如我们设计师设计的UI是根据Iphone6来做的,我们知道 iPhone6的分辨率是750*1334(px),
又或者是根据hdpi的设备来设计的UI,我们知道hdpi的 Android设备是 (240 dpi),像素密度是1.5,即hdpi设备的分辨率宽度是320px, 总之,无论设计稿的单位是px,或者是dp,我们都能够转换成px.
那么我们如果根据px来适配,ios和 android 就都可以兼容了.
假设,我们的设计稿手机是10801920 px.
设计稿上有一个540960 的组件, 即宽度和宽度是手机的一半. 如果我们直接写的时候组件的尺寸这么定义,在其他尺寸的设备上未必是一半,或多,或少. 但是我们可以按比例来看,即我们要实现的宽度是实际设备的一半.
那么假设我们设备的宽度是deviceWidth和deviceHeight , 我们要写的组件大小为: 宽:(540/1080)*deviceWidth,高度: (960/1920)*deviceHeight.
通过这个公式我们可以发现,我们要写的组件宽度就是设计稿上的尺寸width*(deviceWdith/原型设备宽度).那么每次我们写ui的时候,只要直接哪来设计稿的尺寸*(deviceWdith/设备原型)宽度即可.
原理就是先获取,实际设备与原型设备的尺寸比例.
首先flutter获取设备的尺寸的代码是:
以下数据为我的手机数据:
import 'dart:ui';//因为window是dart:ui中提供的,所以需要引入这个包.window.physicalSize //Size(1080.0, 1794.0) 单位pxwidth = window.physicalSize.width //宽度height = window.physicalSize.height //高度//使用这个方法则无需引入包MediaQuery.of(context).size //Size(411.4, 683.4) 单位:dpwidhtDp = MediaQuery.of(context).size.width //宽度 411.4heightDp = MediaQuery.of(context).size.height //高度 683.4设计稿单位是px,且尺寸为1080*1920 px 时:
scaleWidth = width / 1080;scaleHeight = height / 1920;那么我们要写尺寸为500100控件的宽度就是 500scaleWidth .100*scaleHeigh ,注意这时单位是px,flutter中默认组件尺寸单位都是dp,我们还要进行px->dp的操作.除以像素密度就好了.
flutter获取像素密度的方法:
上面两种方法得到的是一样的结果,但是window对象来自dart:ui,所以我们引入这个包:
import ‘dart:ui';设计稿单位是dp,且尺寸为360*640 dp 时:
scaleWidth = widhtDp / 360;scaleHeight = heightDp / 640;那么我们要写尺寸为500*100控件的宽度就是 500*scaleWidth .100*scaleHeigh
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Html5页面在手机端做自适配是很常见的技术需求,下面介绍下在html页面使用hotcss简介使用动态的HTML根字体大小和动态的viewportscale。遵
使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问
功能说明: 实现标签云的效果,包括标签有不同的颜色和字体大小等,颜色和字体大小都为随机显示,可改变代码来控制其范围。实现DeDeCms标签云的效果,包括标签有
前言ReactNative可以开发ios和android的app,在开发过程中,势必会遇上屏幕适配(ios好几种尺寸的屏幕以及android各种尺寸的屏幕)的问
通过本设置可以阻止更改显示在屏幕上的窗口和按钮的字体大小。若启用此设置,显示属性的外观选项卡上的“字体大小”下拉列表会被禁用:如果禁用或