创建流式布局


我们在上一章回中介绍了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相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我! 基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip基于Django+python编写开发的毕业生就业管理系统支持学生教师角色+db数据库(毕业设计新项目).zip
毕设新项目基于python3.7+django+sqlite开发的学生就业管理系统源码+使用说明(含vue前端源码).zip 【备注】 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!有问题请及时沟通交流。 2、适用人群:计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途:项目具有较高的学习借鉴价值,不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行,或热爱钻研,亦可在此项目代码基础上进行修改添加,实现其他不同功能。 欢迎下载!欢迎交流学习!不清楚的可以私信问我! 学生就业管理系统(前端) ## 项目开发环境 - IDE: vscode - node版本: v12.14.1 - npm版本: 6.13.4 - vue版本: @vue/cli 4.1.2 - 操作系统: UOS 20 ## 1.进入项目目录安装依赖 ``` npm install ``` ## 2.命令行执行进入UI界面进行项目管理 ``` vue ui ``` ## 3.编译发布包(请注意编译后存储路径) #### PS:需要将编译后的包复制到后端项目的根目录下并命名为'static' 学生就业管理系统(后端) ## 1.项目开发环境 - IDE: vscode - Django版本: 3.0.3 - Python版本: python3.7.3 - 数据库 : sqlite3(测试专用) - 操作系统 : UOS 20 ## 2.csdn下载本项目并生成/安装依赖 ``` pip freeze > requirements.txt pip install -r requirements.txt ``` ## 3.项目MySQL数据库链接错误 [点击查看解决方法](https://www.cnblogs.com/izbw/p/11279237.html)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值