Flutter 中 Wrap 的使用详解（含对比图）

这是我参与更文挑战的第9天，活动详情查看：更文挑战

前言

之前两篇我们聊了滚动列表 ListView 和 GridView ，这篇我们来聊聊 Wrap ，看字面意思就是「包裹」，与列表型 Widget 区别在于他是可以根据子项 Widget 的大小来实现自动排列的，而且自身不支持滚动。

看看效果

使用方式

因为 Wrap 使用是比较简单的，难点在于各个参数的调配上，所以我们先看看基本的构建方法，然后聊聊各个属性的使用效果

// 简单的构建
Wrap(
  children: List.generate(20, (index) => getItem(index)),
)
复制代码

getItem 实现

/// 获取子项目
Widget getItem(int index) {
  var item = listData[index % listTotal];
  return Chip(
    // 圆形头像
    avatar: CircleAvatar(
      backgroundImage: NetworkImage(item.url),
    ),
    // 文字标签
    label: Text(item.title),
    // 删除按钮，添加后回自动设置 Icon
    onDeleted: () {},
  );
}
复制代码

间距

Wrap(
  // 子项间距
  spacing: 10,
  // 行间距
  runSpacing: 20,
  children: List.generate(20, (index) => getItem(index)),
)
复制代码

方向

Axis.horizontal（水平方向-默认）
Axis.vertical（垂直方向）

Wrap(
  // 方向设置垂直，默认是
  direction: Axis.vertical,
  children: List.generate(20, (index) => getItem(index)),
)
复制代码

对齐参数

Wrap Widget 的难点在于对齐参数的掌握，使用是非常简单的，之前也看到了，那么我们就一个一个的去看效果对比吧

alignment （子项对齐方式）

WrapAlignment.start	WrapAlignment.center	WrapAlignment.end

WrapAlignment.spaceAround	WrapAlignment.spaceBetween	WrapAlignment.spaceEvenly

runAlignment （行「整体」对齐方式）

WrapAlignment.start	WrapAlignment.center	WrapAlignment.end

WrapAlignment.spaceAround	WrapAlignment.spaceBetween	WrapAlignment.spaceEvenly

crossAxisAlignment （次轴对齐方式）

这里为了实现对比效果，我们采用垂直方向布局

// 设置背景容器
Container(
  height: 375,
  width: double.maxFinite,
  // 设置颜色
  color: Colors.green.shade400,
  child: Wrap(
    // 子项间距为 10
    spacing: 10,
    // 为了实现对比效果，我们采用垂直方向布局
    direction: Axis.vertical,
    // 其他对齐方式默认
    // alignment: WrapAlignment.spaceEvenly,
    // runAlignment: WrapAlignment.spaceEvenly,
    crossAxisAlignment: WrapCrossAlignment.start,
    children: List.generate(5, (index) => getItem(index)),
  ),
)
复制代码