Flutter 基础篇（十四）—— 流式布局

在前面讨论到的所有布局容器里面，都没有考虑元素溢出的问题，比如：

Row(
  children: <Widget>[
    Text('jonas'*100)
  ],
);

显然，一行肯定无法显示下这么长的文本，然而，Row 给出的处理方式是 —— 抛出错误！

Flex 、Row 、Column 都存在这样的问题，所以，如果需要考虑溢出场景的时候，应该使用流式布局组件 Wrap 。

Wrap

在 Flutter 中，主要通过 Wrap 来实现流式布局，如果将上面例子中的 Row 换成 Wrap ，那么文本将自动换行。这也是流式布局与前面组件最根本的区别。

来看定义：

Wrap({
  ...
  this.direction = Axis.horizontal,
  this.alignment = WrapAlignment.start,
  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>[],
})

从定义来看，Wrap 的参数几乎跟前面提到的 Row 一致，这里就不再重复了。这里主要介绍三个它特有的属性：

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

鉴于这三个都是比较简单的属性，这里不贴出示例了。