Flutter流式布局Wrap使用详解

目录

先看Wrap相关属性

direction 

alignment

spacing与runSpacing

runAlignment

crossAxisAlignment

verticalDirection

clipBehavior 

完整代码奉上

         对我最大的鼓励与支持：

---

先看Wrap相关属性

 Wrap({
    Key key,
    //排版方向 有 横向Axis.horizontal  纵向Axis.vertical 两种
    this.direction = Axis.horizontal,

    //子控件对齐方式 start center end 三种
    this.alignment = WrapAlignment.start,

    //间距
    this.spacing = 0.0,

    //交叉轴方向的对齐方式
    this.runAlignment = WrapAlignment.start,

    //交叉轴方向的间距
    this.runSpacing = 0.0,

    //子控件在交叉轴的对齐方式
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    //垂直方向 有 up down 方向默认 down
    this.verticalDirection = VerticalDirection.down,

    //裁剪内容方式： 允许裁剪 但不抗锯齿，移步Clip枚举查看更多
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],

direction 

direction顾名思义 方向的意思 可选方向有两种： Axis.horizontal   Axis.vertical 

以下是 两种不同方向下Wrap 的显示情况

alignment

子控件对齐方式 start center end 三种

 body: Container(
        width: 300,
        color: Colors.grey.withAlpha(20),
        padding: EdgeInsets.all(5),
        child: Wrap(
          direction: Axis.horizontal,
          alignment: WrapAlignment.start,//start center end