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

// 简单的构建
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 的难点在于对齐参数的掌握，使用是非常简单的，之前也看到了，那么我们就一个一个的去看效果对比