写点什么

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

用户头像
Android架构
关注
发布于: 13 小时前

间距

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)),),)


提示

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


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

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
Flutter 中 Wrap 的使用详解(含对比图) _ Flutter Widgets