简介我们在构建UI的时候,为了适应不同的屏幕尺寸,我们通常需要做一些自适应配置,而最常见的自适应配置是基于一定的宽度或者高度自动缩放组件。今天给大家介绍两个可以自动缩放的组件AspectRatio和FractionallySizedBox。AspectRatioAspectRatio的目的是按比例缩放其子项。首先看一下AspectRatio的定义:classAspectRatioextendsSingleChildRenderObjectWidget可以看到AspectRatio继承自SingleChildRenderObjectWidget,也就是说它是用来呈现单个child的。AspectRatio需要的属性有两个,分别是aspectRatio和子元素child。aspectRatio是double类型的数据。为了方便,我们一般用比例格式来表示,比如3.0/2.0。虽然我们知道3/2结果是1.5,但我们最好不要自己计算结果,因为使用3.0/2.0更直观。AspectRatio的逻辑是先获取最大宽度或高度,然后根据宽度或高度计算高度和宽度。接下来,让我们通过几个具体的例子来进一步了解AspectRatio。首先是一个无限宽但高为150的容器,然后在容器的child中使用AspectRatio组件,如下图:Widgetbuild(BuildContextcontext){returnContainer(color:Colors.blue,alignment:Alignment.center,width:double.infinity,height:150.0,child:AspectRatio(aspectRatio:3/2,child:Container(color:Colors.red,),),);其中aspectRatio=3/2,如何计算aspectRatio毛布的尺寸?对于aspectRatio的parentwidget,它的宽度是无限的,高度是150,所以可以确定aspectRatio的高度,也就是150。我们根据aspectRatio3=225的比例计算它的width=150/2*,为如下:再看下面的例子:Widgetbuild(BuildContextcontext){returnContainer(color:Colors.blue,alignment:Alignment.center,width:150.0,height:150.0,child:AspectRatio(aspectRatio(:2.0,child:Container(color:Colors.red,),),);}在这个例子中,Container的宽度和高度是相等的。aspectRatio=2.0在它的孩子中使用。如果child的height选择为150,那么对应的width应该是300,显然超出了Container的范围,所以这里我们选择width=150,对应的height=75,如下图:那么问题来了,如果AspectRatio指定了尺寸怎么办?比如我们给aspectRatio的child添加一个宽高限制:Widgetbuild(BuildContextcontext){returnContainer(color:Colors.blue,alignment:Alignment.center,width:150.0,height:150.0,child:AspectRatio(aspectRatio:2.0,child:Container(color:Colors.red,width:50,height:50,),),);你会发现宽高对Container的大小没有影响。在这里,我们将讨论我们之前提到的约束。对于AspectRatio,他想让子child填满它的空间,这样child就会继承约束,显示相同的界面。FractionallySizedBoxFractionallySizedBox有点类似于AspectRatio,但是FractionallySizedBox是根据可用空间的大小按比例设置的。首先看一下FractionallySizedBox的定义:classFractionallySizedBoxextendsSingleChildRenderObjectWidget可以看到FractionallySizedBox和AspectRatio一样继承自SingleChildRenderObjectWidget。FractionallySizedBox有3个属性,分别是alignment、widthFactor和heightFactor。其中,alignment表示子child在FractionallySizedBox中的排列。widthFactor和heightFactor是double类型,代表对应的缩放比例。接下来我们看一下FractionallySizedBox的具体使用。Widgetbuild(BuildContextcontext){returnFractionallySizedBox(widthFactor:1,heightFactor:0.25,alignment:FractionalOffset.center,child:DecoratedBox(decoration:BoxDecoration(border:Border.all(color:Colors.red,width:4,),),),);}这里我们设置对应的widthFactor=1和heightFactor=0.25,也就是说宽度和可用空间的宽度一样,高度只有原来的1/4。为了方便,我们给child封装了一个DecoratedBox来显示盒子的边界。最终界面如下:总结熟练使用AspectRatio和FractionallySizedBox可以很方便的按比例绘制界面元素,非常好用。本文示例:https://github.com/ddean2009/learn-flutter.git更多内容请参考www.flydean.com最通俗的解读,最深刻的干货,最简洁的教程,以及很多你不知道的小技巧等着你去发现!欢迎关注我的公众号:《程序那些事儿》,懂技术,更懂你!
