创建流式布局

talk_8

于 2024-06-21 22:45:00 发布

阅读量414

点赞数 8

分类专栏：一起Talk Flutter吧文章标签：移动开发Flutter

本文链接：https://blog.csdn.net/talk_8/article/details/139867466

版权

一起Talk Flutter吧专栏收录该内容

570 篇文章 13 订阅

订阅专栏

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码
4. 经验总结

我们在上一章回中介绍了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的属性值试试，它的值不同时，每列中显示的子组件数量也不相同。大家把这个知识当前扩展知识就可以，毕竟在大
部分情况下都是使用默认的水平布局,再加上流式布局自带的换行功能，可以满足几乎所有的布局需求。