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

前言

之前两篇我们聊了滚动列表 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)),
  ),
)

WrapCrossAlignment.start	WrapCrossAlignment.center	WrapCrossAlignment.end

提示

如果你无法实现对齐，请检查你外部的容器，因为如果两个都是缩放型容器那么就无法实现对齐，需要依赖外部容器了。

最后深夜更文不易，如有帮助请点赞支持

源码仓库

基于 Flutter 🔥 最新版本

• Flutter Widgets 仓库

参考链接

• Wrap (Flutter Widget of the Week)
• Flutter-Wrap

关注专栏

• 此文章已收录到下面👇 的专栏，可以直接关注
• 更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦