Flutter Wrap 流布、自动换行

Wrap 可以实现流布局（自动换行），当子元素在一行排列空间不足时，会自动换行排列显示。

参数详解 

属性	说明
direction	排列方向（垂直和水平）
alignment	主轴（x）对齐方式
spacing	主轴（x）子元素间距
runAlignment	纵轴（y）对齐方式
runSpacing	纵轴（y）子元素间距
crossAxisAlignment	交叉轴（crossAxis）方向上的对齐方式。
textDirection	正反序 排列
verticalDirection	文本方向。
children	子元素集合

alignment 

WrapAlignment.start,
WrapAlignment.end,
WrapAlignment.center,
WrapAlignment.spaceAround,//左右对齐 间距与控件 同时平分空间

WrapAlignment.spaceBetween,//左右对齐 间距平分 两边没间隙

WrapAlignment.spaceEvenly,//左右对齐 间距平分 两边有间隙

 代码示例

 

class MyBodyA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.red[200],
      width: 400,
      height: 500,
      child: Wrap(
        //水平间距
        spacing: 8.0,
        //垂直间距
        runSpacing: 10.0, 
        //对齐方式
        alignment: WrapAlignment.spaceBetween,
        children: [
          MyView('A'),
          MyView('widget'),
          MyView('that'),
          MyView('displays'),
          MyView('its'),
          MyView('children'),
          MyView('int'),
          MyView('multiple'),
          MyView('horizontal'),
          MyView('vertical'),
          MyView('runs'),
        ],

      )
    );
  }
}

//定义一个 公共类  返回view
class MyView extends StatelessWidget {
  String text;
  MyView(this.text);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(8, 5, 8, 5),
      decoration: BoxDecoration(
        border:Border.all(
          color: Colors.blue,
          width: 1,
        ),
        borderRadius: BorderRadius.all(
          Radius.circular(8),
        ),
      ),
      child: Text(this.text),
    );
  }
}

效果图