Wrap组件

tech2025-05-01  3

Wrap组件

Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Row表现几乎一致。但Row与columl都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上去扩展显示。

属性默认值说明directionAxis.horizontal主轴的方向,默认水平alignmentWrapAlignment.start主轴的对其方式spacing0.0主轴方向上的间距runAlignmentWrapAlignment.startrun的对齐方式,run可以理解为新的行或者列,如果是水平方向布局的话,run可以理解为新的一行runSpacing0.0run的间距textDirection文本方向verticalDirectionVerticalDirection.down定义了children摆放顺序,,默认是down,见Flex相关属性介绍 return Container( child: Wrap( direction: Axis.vertical, spacing: 20.0, alignment: WrapAlignment.spaceAround, runSpacing: 20.0, children: [ MyButton('hello'), MyButton('hello1'), MyButton('hello3hdfhg'), MyButton('hello'), MyButton('hello1'), MyButton('hello3dgfgjfgjfgj'), MyButton('hello'), MyButton('hello1'), MyButton('hello3'), ], ), );

效果如下:

最新回复(0)