阅读 164

Flutter 中 Wrap 的使用详解(含对比图) | Flutter Widgets

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

前言

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

看看效果

01.png

使用方式

因为 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)),
)
复制代码

02.png

方向

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

03.png

对齐参数

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

alignment (子项对齐方式)

WrapAlignment.startWrapAlignment.centerWrapAlignment.end
image.pngimage.pngimage.png
WrapAlignment.spaceAroundWrapAlignment.spaceBetweenWrapAlignment.spaceEvenly
image.pngimage.pngimage.png

runAlignment (行「整体」对齐方式)

WrapAlignment.startWrapAlignment.centerWrapAlignment.end
image.pngimage.pngimage.png
WrapAlignment.spaceAroundWrapAlignment.spaceBetweenWrapAlignment.spaceEvenly
image.pngimage.pngimage.png

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.startWrapCrossAlignment.centerWrapCrossAlignment.end
image.pngimage.pngimage.png

提示

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

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

源码仓库

基于 Flutter 🔥 最新版本

参考链接

关注专栏

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

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

文章分类
Android
文章标签