关于ios:Flutter-210Flutter手把手教程UI布局和Widget流式布局Wrap

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

Wrap

在 Flutter 中Wrap是流式布局控件，Row和 Column 在布局上是很好用，然而有一个毛病，如果当子控件数量过多导致 Row 或Column装载不下的时候，就会呈现 UI 页面上的谬误。Wrap能够完满的防止这个问题，当控件过多一行显示不全的时候，Wrap能够换行显示。

当然 Wrap 跟Row和 Column 有着很多类似的中央。
咱们先来看 Wrap 的构造函数：

Wrap({
    // Key
    Key key,
    // 子控件显示方向，有垂直方向 程度方向两个值
    this.direction = Axis.horizontal,
    /// 子控件的 布局形式  跟 Column 的 mainAxisalignment 相似 
    this.alignment = WrapAlignment.start,
    /// 子控件 主轴方向间距
    this.spacing = 0.0,
    /// 子控件 穿插方向的 布局形式
    this.runAlignment = WrapAlignment.start,
    /// 子控件 穿插方向间距
    this.runSpacing = 0.0,
    /// 穿插轴的对齐形式 与 Column 的 crossAxisAlignment 一样
    this.crossAxisAlignment = WrapCrossAlignment.start,
    /// 书写方向 与 Column 的 textDirection 一样
    this.textDirection,
    /// Wrap 穿插轴方向上子控件的布局方向
    this.verticalDirection = VerticalDirection.down,
    /// 裁剪形式
    this.clipBehavior = Clip.hardEdge,
    /// 子控件
    List<Widget> children = const <Widget>[],}) 

上面咱们就来看看这些参数

direction

direction有两个参数值 Axis.horizontal 和Axis.vertical，很显著它治理着 Wrap 的是程度布局还是垂直布局。
Axis.horizontal示意子控件按程度方向布局，Axis.vertical示意子控件按垂直方向布局显示。

Axis.horizontal
成果如下：

Axis.vertical
成果如下：

alignment

alignment接管一个 WrapAlignment 类型的枚举，WrapAlignment共有六个枚举值，如下：

WrapAlignment的枚举值与成果与 Column 的 mainAxisAlignment成果一样，想理解的能够看之前的文章

WrapAlignment.start

WrapAlignment.center

WrapAlignment.end

WrapAlignment.spaceBetween

WrapAlignment.spaceEvenly

WrapAlignment.spaceAround

runAlignment

runAlignment接管一个 WrapAlignment 类型的枚举，WrapAlignment共有六个枚举值（跟 alignment 的枚举值是一样的），runAlignment管制是的是 Wrap 布局穿插方向的对齐形式。
如果 Wrap 的是程度方向布局，runAlignment管制的就是 Wrap 垂直方向的对齐形式。

verticalDirection

verticalDirection有两个值 VerticalDirection.down 和VerticalDirection.up，示意从哪个方向开始布局。
VerticalDirection.down

VerticalDirection.up

留神 当设置为 VerticalDirection.up 的时候，第一个控件也就是 Number 0 是从最低端最左侧开始的。

spacing 和 runSpacing

spacing示意子控件主轴方向间距，runSpacing子控件在穿插方向间距。
在一个程度方向布局的 Wrap 为中，spacing示意的就是程度方向子控件之间的间距，runSpacing示意的就是子控件在垂直方向上的间距。

space
space等于 10 的样子

space等于 40 的样子

runSpacing
runSpacing等于 10 的样子

runSpacing等于 40 的样子

想体验以上示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->wrap_page.dart 查看，并且能够下载下来运行并体验。