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'),
],
),
);
效果如下: