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

这是我参与更文挑战的第9天&＃xff0c;活动详情查看&＃xff1a; 更文挑战

前言

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

看看效果

使用方式

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

// 简单的构建
Wrap(
children: List.generate(20, (index) &＃61;> getItem(index)),
)

getItem 实现

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

间距

Wrap(
// 子项间距
spacing: 10,
// 行间距
runSpacing: 20,
children: List.generate(20, (index) &＃61;> getItem(index)),
)

方向

• Axis.horizontal&＃xff08;水平方向-默认&＃xff09;
• Axis.vertical&＃xff08;垂直方向&＃xff09;

Wrap(
// 方向设置垂直&＃xff0c;默认是
direction: Axis.vertical,
children: List.generate(20, (index) &＃61;> getItem(index)),
)

对齐参数

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

alignment &＃xff08;子项对齐方式&＃xff09;

WrapAlignment.start	WrapAlignment.center	WrapAlignment.end
WrapAlignment.spaceAround	WrapAlignment.spaceBetween	**WrapAlignment.spa
ceEvenly**

runAlignment &＃xff08;行「整体」对齐方式&＃xff09;

| WrapAlignment.start | WrapAlignment.center | WrapAlignment.end |
方式&＃xff09;

| WrapAlignment.start | WrapAlignment.center | WrapAlignment.end |