Flutter Wrap 图例

简介: Flutter Wrap 图例

image.png

Flutter Wrap 用来排列多个 child,可以自动换行。只看文档对于 child 如何排列还不是很直观,本文以图例的方式解说每个参数的效果。

  • spaceAround  每个child 的左右空白一样
  • spaceBetween 最左最右没有空白,在 child 之间平分。
  • spaceEvenly  等分空白

如果没有特别说明 direction = Axis.horizontal,verticalDirection = VerticalDirection.down。

alignment

alignment 的类型是 WrapAlignment,一共有 6 个值,用来控制 children 在主轴的排列。


image.png

crossAxisAlignment


crossAxisAlignment 的类型是 WrapCrossAlignment,一共有 3 个值,用来控制 children 在交叉轴的排列。


image.png


runAlignment

runAxisAlignment 的类型是 WrapAlignment,一共有 6 个值,用来控制 每行 在交叉轴的排列。


image.png


spacing

spacing 是 children 在主轴方向的间隙。spacing 的默认值是 0


image.png

你可能会问,最左边不能用 spacing 设置空隙吗?答案是不能,spacing 只能设置 child 之间的间隙。

runSpacing

runSpacing 是每行在交叉轴方向的间隙。runSpacing 默认值是 0


image.png


默认情况下行之间没有空隙,都连在一起了。

runSpacing 也只能设置 行与行之间 的间隙。

direction

direction 是控制按行排还是按列排的,默认是按行排。


image.png

VerticalDirection

VerticalDirection 是控制从上往下排,还是从下往上排的。默认是从上往下排。


image.png


目录
相关文章
|
前端开发 Java 开发工具
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
494 0
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
flutter系列之:永远不用担心组件溢出的Wrap
我们在flutter中使用能够包含多个child的widget的时候,经常会遇到超出边界范围的情况,尤其是在Column和Row的情况下,那么我们有没有什么好的解决办法呢?答案就是今天我们要讲解的Wrap。
flutter系列之:永远不用担心组件溢出的Wrap
Flutter 流式布局之Wrap
Flutter 流式布局之Wrap
493 0
Flutter 流式布局之Wrap
|
Dart 开发者
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(三)
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(三)
367 0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(三)
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(二)
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(二)
237 0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(二)
|
容器
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(一)
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(一)
322 0
【Flutter】Flutter 照片墙 ( Center 组件 | Wrap 组件 | ClipRRect 组件 | Stack 组件 | Positioned 组件 | 按钮组合组件 )(一)
|
Dart 开发者
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(二)
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(二)
348 0
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(二)
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(一)
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(一)
266 0
【Flutter】Flutter 布局组件 ( Wrap 组件 | Expanded 组件 )(一)
|
10月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
149 1
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
552 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex