网站网站是怎么做的,wordpress推荐插件,h5制作的软件,敬请期待上一句文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了动画相关的内容#xff0c;本章回中将介绍
如何适配屏幕.闲话休提#xff0c;让我们一起Talk Flutter吧。 概念介绍
我们平常使用的手机屏幕大小不同#xff0c;App运行在这些大小不同的屏幕上时效果却相同… 文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了动画相关的内容本章回中将介绍
如何适配屏幕.闲话休提让我们一起Talk Flutter吧。 概念介绍
我们平常使用的手机屏幕大小不同App运行在这些大小不同的屏幕上时效果却相同其原因就是App对不同大小的屏幕做了适配。因此我们把程序中对不同屏幕大小做处理的操作叫作适配。
适配是移动开发中必不可少的内容在Android和IOS原生开发中需要做适配Flutter做为跨端开发的框架也需要做适配工作。本章回中将介绍在Flutter开发中如何去适配大小不同的屏幕。
实现方法
适配的核心思想是把相同的尺寸乘以一定的比率使得该尺寸在不同大小的屏幕上占用的屏幕空间相同这样给人的感觉就是这个尺寸到不同大小的屏幕上看着都一样。
我们举例子来说明80dp在480*720大小的屏幕上占用1/6屏幕宽度。在240*320大小的屏幕上如果想占用1/6宽度那么需要40dp.此时就需要让80dp乘以比率0.5才通满足条件。依次类推在720*960大小的屏幕上如果想占用1/6宽度就120dp,此时就需要让80乘以比率1.5才能满足条件。
适配的思想介绍完了那么如何计算不同屏幕的比率呢常用做法是选一个基准值屏幕的宽度除以基准值就是比率在App的UI设计中通常以iPone6的屏幕尺寸为基准它的屏幕尺寸是一个中间尺寸有比它小的屏幕也有比它大的屏幕选用这个尺寸大小可以方便适配其它尺寸的屏幕。
iPhone6实际宽度375 * 667单位是pt分辨率:750 * 1334单位是px。为什么是屏幕宽度呢因为手机屏幕的宽度比长度小所以通常以宽度和高度中的最小值来适配。
因此我们可以得到比率公式屏幕比率屏幕分辨率宽度/750. 750是iPhone6的屏幕宽度也可以换成UI设计稿中的尺寸通常设计稿件中的尺寸都是像素因此这里使用750为基准值如果设计 稿不以这个尺寸为基准值那么把750换成设计稿中的尺寸就可以。
示例代码
///自己设计的屏幕适配类,转换单位为dp
class XScreenUtil {static double baseSize 0;static double physicalWidth 0;static double physicalHeight 0;static double realWidth 0;static double realHeight 0;static double dpr 0;static double statusBarHeight 0;///计算好的屏幕比率static double fitRatio 0;///计算好的屏幕比率,单位为像素static double fitRatioPx 0;///pt类似dpios中的屏幕单位point的缩写px是像素缩小在设计中使用广泛///baseSize以iPhone6为基准默认值是750px,375dpstatic void init(BuildContext context,[baseSize375]) {///获取屏幕物理分辨率,单位是pxphysicalWidth View.of(context).physicalGeometry.width;physicalHeight View.of(context).physicalGeometry.height;///获取屏幕物理分辨率,单位是ptrealWidth MediaQuery.of(context).size.width;realHeight MediaQuery.of(context).size.height;///屏幕的比率比如2x,3xdpr View.of(context).devicePixelRatio;///状态栏的高度除以dpr才是屏幕中实际的的高度statusBarHeight MediaQuery.of(context).padding.top / dpr;///屏幕适配时以宽度为单位进行适合screenutil包中分宽度和高度两种适配方式w为宽度h为度ex200.w,200.h.///实际项目中以宽度和高度中数值比较小的一个进行适配fitRatio realWidth / baseSize;fitRatioPx physicalWidth / baseSize * 2; ///iphone6的dp和px转换需要乘以2///iphone6时实际值如下// fitRatio realWidth / 375;// fitRatioPx physicalWidth / 750; ///iphone6的dp和px转换需要乘以2debugPrint(PWidth: $physicalWidth, PHeight: $physicalHeight, RWidth: $realWidth, RHeight: $realHeight dpr: $dpr, top: $statusBarHeight);}///以pt为单位时使用此方法static double setFitRatio(double value) {return value * fitRatio;}///以px为单位时使用此方法static double setFitRatioPx(double value) {return value * fitRatioPx;}
}///使用自己设计的屏幕适配类来适配屏幕
Container(color: Colors.orange,width: XScreenUtil.setFitRatio(200),height: XScreenUtil.setFitRatio(200),child: const Icon(Icons.pages),
),上面的示例代码单独封装了一个类通过类的静态方法可以直接使用屏幕比率也就是代码中的setFitRatio()方法代码中使用了MediaQuery类的size属性获取到了屏幕的宽度和长度。这个值会随着屏幕的不同而不同。需要注意的是尺寸的单位不一样使用的方法也不一样。此外代码中把基准值当作了类构造函数中的可选参数如果指定了基准值那么就使用基准值反之使用默认值750.
看官们关于如何实现屏幕适配相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
