简介我们在构建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最通俗的解读，最深刻的干货，最简洁的教程，以及很多你不知道的小技巧等着你去发现！欢迎关注我的公众号：《程序那些事儿》，懂技术，更懂你！
