Flutter 中 Wrap 的使用详解（含对比图） _ Flutter Widgets

在Flutter中，Wrap是一个可以排列子widget的widget，它可以流式布局其子项，并在必要时自动换行。Wrap和Row类似，都是一个多子widget的布局类，但Wrap在子widget空间不足的时候会自动换行显示。

以下是Wrap的一些常用属性：

1. direction：子widget的排列方向，默认为水平。
2. alignment：子widget在交叉轴方向上的对齐方式。
3. spacing：子widget之间的空隙。
4. runSpacing：Wrap中每一行之间的空隙。
5. crossAxisAlignment：子widget在交叉轴方向上的对齐方式。
6. textDirection：当direction为水平时，定义子widget的排列方向。
7. verticalDirection：定义子widget的堆放方向。

以下是一个简单的Wrap使用示例：

Wrap(
  spacing: 8.0,
  runSpacing: 4.0,
  children: <Widget>[
    Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text('AB'),
      ),
      label: Text('Chip A'),
    ),
    Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text('CD'),
      ),
      label: Text('Chip B'),
    ),
    Chip(
      avatar: CircleAvatar(
        backgroundColor: Colors.blue.shade900,
        child: Text('EF'),
      ),
      label: Text('Chip C'),
    ),
  ],
)

在这个示例中，我们创建了一个Wrap，其中包含三个Chip。每个Chip将根据可用空间自动换行。

对比图：

Wrap和Row的主要区别在于，当子widget的总宽度超过父widget的宽度时，Row会在父widget的宽度内水平滚动，而Wrap则会自动换行。

以下是一个Row和Wrap的对比示例：

Row(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.green,
    ),
  ],
)
 
Wrap(
  children: <Widget>[
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.red,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.blue,
    ),
    Container(
      width: 100.0,
      height: 100.0,
      color: Colors.green,
    ),
  ],
)

在这个示例中，我们创建了两个包含三个Container的Row和Wrap。当Container的总宽度超过父widget的宽度时，Row会显示滚动条，而Wrap则自动将Container分布到多行中。