流式布局（Wrap、Flow）

流式布局（Wrap、Flow）

有时候我们在用Row 和 Colum 时，如果子 widget 超出屏幕范围，则会报右边溢出错误，这是因为Row默认只有一行，如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutter中通过Wrap和Flow来支持流式布局。

Wrap

定义：

Wrap({
    super.key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,//主轴方向子widget的间距
    this.runAlignment = WrapAlignment.start,//纵轴方向的对齐方式
    this.runSpacing = 0.0,//纵轴方向的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.clipBehavior = Clip.none,
    super.children,
  })

• spacing：主轴方向子widget的间距
• runSpacing：纵轴方向的间距
• runAlignment：纵轴方向的对齐方式

 Wrap(
  spacing: 8.0,//主轴(水平)方向间距
  runSpacing: 4.0,//纵轴方向间距
  alignment: WrapAlignment.center,//沿主轴
  children: const [
    Chip(
      label: Text('First-First'),
      avatar: CircleAvatar(backgroundColor: Colors.green,child: Text('A'),),
    ),
    Chip(
      label: Text('Two-Two'),
      avatar: CircleAvatar(backgroundColor: Colors.green,child: Text('B'),),
    ),
    Chip(
      label: Text('Three-Three'),
      avatar: CircleAvatar(backgroundColor: Colors.green,child: Text('C'),),
    ),
    Chip(
      label: Text('Four-Four'),
      avatar: CircleAvatar(backgroundColor: Colors.green,child: Text('D'),),
    ),
  ],
)