我们在上一章回中介绍了Chip Widget相关的内容,本章回中将介绍如何使用Wrap Widget.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本文中将要介绍的Wrap Widget是一种布局类组件,类似Column或者Row组件,它经常和Chip配合使用,二者在一起可以打造出流式布局。传统布局中如果某一
行或者某一列中的内容超过当前行或者列的范围时就会被屏幕覆盖,导致部分内容无法被看到,而流式布局则不会发生这种现象,它会自动换行或者列,把无法在当前行或
者列显示的内容换到下一行或者列显示。说这么多,大家可能有点记不住,一句话:流式布局就是一种可以自动换行、列的布局。
2.使用方法
流式布局主要通过Wrap组件和Chip组件配合实现,Wrap充当容器,Chip充当容器中的内容。Chip的使用方法可以参考上一章回中的内容,本章回中只介绍Wrap组件的
使用方法。和其它组件类似,Wrap组件提供了相关的属性来控制自己,下面是常用的属性:
- direction属性:主要用来控制Wrap中子组件的排列方向,默认水平排列;
- spacing属性:主要用来控制主轴方向上子组件之间的间隔;
- runSpacing属性:主要用来控制纵轴方向上子组件之间的间隔;
- runAlignment属性:主要用来控制纵轴方向上子组件的对齐方式;
3. 示例代码
Wrap(
//控制Wrap中组件的排列方向,默认是水平排列
// direction: Axis.vertical,
//用来控制主轴方向上子组件之前的间隔
// spacing: 206,
//用来控制纵轴方向上子组件之前的间隔和对齐方式
// runSpacing: 8,
//对齐方式不同时尺寸要求也不一样
direction: Axis.horizontal,
spacing: 8,
runSpacing: 19,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Chip(),//Chip内容省略不写,请参考上一章回中的代码
]),
上面的代码中演示了Wrap的用法,一种是当作垂直布局来使用,这部分内容被注释掉了,大家可以打开它自行试试,另外一种是当作水平布局来使用,这也是默认的用法;
其实这两种用法本质上相同,不一样的地方在于水平和垂直布局中spacing属性的值,它的值在水平布局中表示子组件之间的间隔,在垂直布局中表示布局的宽度,这个
知识点是我调试后发现,大家可以自行修改spacing的属性值试试,它的值不同时,每列中显示的子组件数量也不相同。大家把这个知识当前扩展知识就可以,毕竟在大
部分情况下都是使用默认的水平布局,再加上流式布局自带的换行功能,可以满足几乎所有的布局需求。
4. 经验总结
流式布局就是一种可以自动换行、列的布局。在正常情况下优先使用Column和Row组件来组成列或者行布局,遇到行宽或者列高可变的场景时再考虑使用流式布局;使用
流式布局时虽然也可以使用其它的组件,但是最好是搭配Chip组件一起使用,它和Wrap就如亲兄弟一般,正应了哪句话:打仗亲兄弟。
看官们,关于Wrap Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!