Flutter - Wrap 流式布局

Wrap 总的来说 ,使用起来比较方便 ,主要的功能,我理解的就是自动换行,行内空间的位置不够时 可以自动换行,显示

有三个属性比较重要

Wrap({
...
this.spacing = 0.0,    // 主轴方向子widget的间距
this.runSpacing = 0.0, // 纵轴方向的间距
this.runAlignment = WrapAlignment.start,  // 纵轴方向的对齐方式
})

示例

Wrap(
  spacing: 8,
  runSpacing: 4,
  runAlignment: WrapAlignment.center,
  children: const <Widget>[
    Chip( 
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('A')), 
      label:  Text('asasfasasasfasdasdasasfasdasdasasfasdasdasasfasdasdaasasfasasasfasdasdasasfasdasdasasfasdasdasasfasdasdasasfasdasddasdsasfasdasddasd'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('M')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: Text('sda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('Laurens'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('asasfasdasdasda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('a'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('sdasd'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.red, child: Text('A')),
      label: Text('Lafayette'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('H')),
      label: Text('sda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('Laurens'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('asasfasdasdasda'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('a'),
    ),
    Chip(
      avatar: CircleAvatar(backgroundColor: Colors.blue, child: Text('J')),
      label: Text('sdasd'),
    ),
        Text('sdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasdsdasd'),

  ],
)