，再也不用担心组件溢出简介我们在flutter中使用可以包含多个children的widget时，经常会遇到超出边界范围的情况，尤其是Column和Row的情况。那么我们有什么好的解决办法吗？答案就是我们今天要讲解的Wrap。Row和Column的困境Row和Column可以包含多个子widget，如果子widget超出了Row或Column的范围会怎样？我们以Row的情况为例：,),黄盒(),],);}在上面的例子中，我们在Row中添加了几个YellowBox，YellowBox是一个width=100，height=50的矩形：Widgetbuild(BuildContextcontext){returnContainer(width:100,height:50,decoration:BoxDecoration(颜色：Colors.yellow，边框：Border.all(),),);}运行上面的代码，我们可以得到这样一个界面：如果再增加几个YellowBox会有什么效果呢？我们在上面的行中再添加一个黄色框：YellowBox(),),YellowBox(),YellowBox(),],);}运行得到如下界面：可以看到，由于Row中的子widget过多，已经超出了Row的范围，界面一直报错，要解决这个问题，需要使用Wrap组件。Wrap组件详解首先看Wrap的定义：classWrapextendsMultiChildRenderObjectWidgetWrap继承自MultiChildRenderObjectWidget，说明可以包含多个child子。接下来是Wrap构造函数：Wrap({Key?key,this.direction=Axis.horizo??ntal,this.alignment=WrapAlignment.start,this.spacing=0.0,this.runAlignment=WrapAlignment.start,this.runSpacing=0.0,this.crossAxisAlignment=WrapCrossAlignment.start,this.textDirection,this.verticalDirection=VerticalDirection.down,this.clipBehavior=Clip.none,Listchildren=const[],}):assert(clipBehavior!=null)，超级（钥匙：钥匙，孩子：孩子）；Wrap中常用的属性列在构造函数中。其中，direction表示子组件的排列方向。alignment表示子组件的对齐方式。spacing表示子组件的间隔。与spacing类似，还有一个runSpacing属性。两者有什么区别？我们还是通过一个具体的例子来看。Widgetbuild(BuildContextcontext){returnWrap(direction:Axis.horizo??ntal,textDirection:TextDirection.ltr,children:[YellowBox(),YellowBox(),//展开(//child:YellowBox(),//),YellowBox(),YellowBox(),YellowBox(),],);还是上面的例子，这里我们用Wrap代替Row，这里用的是方向选项，表示Wrap是在水平方向进行的。然后在children中添加了5个YellowBoxes。注意这里不能使用Expanded，否则会报错，所以我们注释掉Expanded，运行得到如下界面：当它超出一条线的范围时。这就是Wrap的功能。我们在讲解Wrap的时候，也提到了两个属性，分别是spacing和runSpacing。两者有什么区别？先看间距：Widgetbuild(BuildContextcontext){returnWrap(direction:Axis.horizo??ntal,spacing:10,textDirection:TextDirection.ltr,children:[YellowBox(),YellowBox(),//Expanded(//child:YellowBox(),//),YellowBox(),YellowBox(),YellowBox(),],);}我们先给Wrap添加spacing属性，运行它得到如下界面：可以看到YellowBoxes之间的间距是用来划分的。那么如果我们想在Wrap换行的时候两行之间有一些空隙怎么办呢？这时候需要用到runSpacing属性：Widgetbuild(BuildContextcontext){returnWrap(direction:Axis.horizo??ntal,spacing:10,runSpacing:10,textDirection:TextDirection.ltr,children:[YellowBox(),YellowBox(),//扩展(//child:YellowBox(),//),YellowBox(),YellowBox(),YellowBox(),],);}运行得到如下界面：Wrap已经完美运行。SummaryWrap可以使用不同的方向来代替Row或Column。当组件可能超出范围时，我们可以考虑使用Wrap。本文示例：https://github.com/ddean2009/learn-flutter.git更多内容请参考www.flydean.com最通俗的解读，最深刻的干货，最简洁的教程，以及很多你不知道的小技巧等着你去发现！欢迎关注我的公众号：《程序那些事儿》，懂技术，更懂你！
