流式布局 Wrap

用 Row 的时候可以发现子元素不会自动换行，这时候就需要 Wrap 了。

https://api.flutter.dev/flutter/widgets/Wrap-class.html

定义

Wrap({
  this.direction = Axis.horizontal,
  // 主轴方向的对齐方式
  this.alignment = WrapAlignment.start,
  // 主轴方向子widget的间距
  this.spacing = 0.0,
  // 纵轴方向的对齐方式
  this.runAlignment = WrapAlignment.start,
  // 纵轴方向的间距
  this.runSpacing = 0.0,
  // 交叉轴对齐方式
  this.crossAxisAlignment = WrapCrossAlignment.start,
  this.textDirection,
  this.verticalDirection = VerticalDirection.down,
  List<Widget> children = const <Widget>[],
})

示例

代码

import 'package:flutter/material.dart';

class WrapPage extends StatelessWidget {
  const WrapPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Wrap(
        // 主轴方向子widget的间距
        spacing: 10,
        // 纵轴方向的间距
        runSpacing: 100,
        // 主轴方向的对齐方式
        alignment: WrapAlignment.start,
        children: const [
          FlutterLogo(size: 100),
          FlutterLogo(size: 100),
          FlutterLogo(size: 100),
          FlutterLogo(size: 100),
          FlutterLogo(size: 100),
          FlutterLogo(size: 100),
        ],
      ),
    );
  }
}

输出