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

间距

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 （子项对齐方式）

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

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

/tos-cn-i-k3u1fbpfcp/69b97000cb4c4160be623524614a6011~tplv-k3u1fbpfcp-zoom-1.image) |

|| WrapAlignment.spaceAround | WrapAlignment.spaceBetween | WrapAlignment.spaceEvenly ||

|

|

|

crossAxisAlignment （次轴对齐方式）

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

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

提示

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

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