Flutter 逐步 UI 布局和小部件 - Fluid Layout Warp

Wrap

V FlutterWrap›› Row 和栏它在布局方面非常有用，但它有一个缺点。如果子控件过多，无法加载Row或Column，UI页面会出现错误。 Wrap可以完美避免这个问题。如果控件太多，一行无法完整显示，可以另起一行显示Wrap。

当然Wrap与行和列有很多相似之处。我们先看构造函数Confucia：

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有两个参数值Wrap

是水平或垂直布局。 Axis.horizontal表示子控件沿水平方向分布，Axis.vertical表示子控件沿垂直方向分布。

Axis.horizontal有以下效果：

Axis.vertical类型的枚举，u''值的比较，如下：

Wrap枚举值​​和效果 Alignment 和 Column mainAxisAlignment ，想了解更多可以看上一篇，效果同一篇文章

枚举值	描述
start	与起始位置对齐
end	与结束位置对齐对齐
spaceBetween	将剩余空间分成 n-1 部分(n 是每部分插入子控件之间
space均匀	将剩余空间分成n+1部分（n为子控件数量）然后均匀间隔
space围绕	将剩余空间分成2n份（n为子控件的数量） 每个子控件的上下各放置一个

Wrap-align.start


Wrap-align.center


Wrap对齐.end
❙Wrap。 WrapAlignment.spaceEvenly


WrapAlignment.spaceAround


runAlignment

runAlignment 接受类型枚举

WrapAlignment.spaceAround

共有六个枚举值（枚举值与align相同），runAlignment控制Wrap的横向对齐。
如果 Wrap 水平放置，runAlignment 控制垂直对齐’››

verticalDirection

verticalDirection有两个值…VerticalDirection.down和❙›››从哪个方向开始布局。
VerticalDirection.down

VerticalDirection.upte

⓹lib->trastras❙->