flutter系列之:永远不用担心组件溢出的Wrap
简介
我们在flutter中使用能够包含多个child的widget的时候,经常会遇到超出边界范围的情况,尤其是在Column和Row的情况下,那么我们有没有什么好的解决办法呢?答案就是今天我们要讲解的Wrap。
Row和Column的困境
Row和Column中可以包含多个子widget,如果子widget超出了Row或者Column的范围会出现什么情况呢?
我们以Row的情况举个例子:
Widget build(BuildContext context) {
return Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
YellowBox(),
YellowBox(),
Expanded(
child: YellowBox(),
),
YellowBox(),
],
);
}
上面的例子中,我们在Row中添加了几个YellowBox,YellowBox是一个width=100,height=50的长方形:
Widget build(BuildContext context) {
return Container(
width: 100,
height: 50,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(),
),
);
}
运行上面的代码,我们可以得到这样的界面:
如果在Row中多添加几个YellowBox会有什么效果呢?
我们在上面的Row中多添加一个yellowBox:
Widget build(BuildContext context) {
return Row(
textDirection: TextDirection.ltr,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
YellowBox(),
YellowBox(),
Expanded(
child: YellowBox(),
),
YellowBox(),
YellowBox(),
],
);
}
运行可以得到下面的界面:
可以看到,因为Row中的子widget太多了,已经超出了Row的范围,界面上已经报错了。
要解决这个问题,就需要使用到Wrap组件。
Wrap组件详解
先来看下Wrap的定义:
class Wrap extends MultiChildRenderObjectWidget
Wrap继承自MultiChildRenderObjectWidget,表示可以包含多个子child。
接下来是Wrap的构造函数:
Wrap({
Key? key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
}) : assert(clipBehavior != null), super(key: key, children: children);
构造函数中列出了Wrap中常用的属性。
其中direction表示子组件的排列方向。alignment表示的是子组件的对其方式。spacing表示子组件的间隔。
跟spacing类似的还有一个runSpacing属性,两者有什么区别呢? 我们还是通过一个具体的例子来查看。
Widget build(BuildContext context) {
return Wrap(
direction: Axis.horizontal,
textDirection: TextDirection.ltr,
children: [
YellowBox(),
YellowBox(),
// Expanded(
// child: YellowBox(),
// ),
YellowBox(),
YellowBox(),
YellowBox(),
],
);
还是上面的例子,这里我们使用Wrap来替换Row,这里我们使用了direction选项,表示是在横向方向进行Wrap。
然后在children中添加了5个YellowBox。
注意,这里不能使用Expanded,否则会报错,所以我们把Expanded注释掉了,运行可以得到下面的界面:
可以看到YellowBox是按行的方向来排列的,超出一行的范围之后就会自动换行,这也就是Wrap的功能。
我们在讲解Wrap的时候,还提到了两个属性,分别是spacing和runSpacing。两者有什么区别呢?
先看下spacing:
Widget build(BuildContext context) {
return Wrap(
direction: Axis.horizontal,
spacing: 10,
textDirection: TextDirection.ltr,
children: [
YellowBox(),
YellowBox(),
// Expanded(
// child: YellowBox(),
// ),
YellowBox(),
YellowBox(),
YellowBox(),
],
);
}
我们先给Wrap添加spacing属性,运行可以得到下面的界面:
可以看到YellowBox之间是用spacing来进行分割的。
那么如果我们希望在Wrap换行的时候,两行之间也有一些间距应该怎么处理呢?
这个时候就需要用到runSpacing属性了:
Widget build(BuildContext context) {
return Wrap(
direction: Axis.horizontal,
spacing: 10,
runSpacing: 10,
textDirection: TextDirection.ltr,
children: [
YellowBox(),
YellowBox(),
// Expanded(
// child: YellowBox(),
// ),
YellowBox(),
YellowBox(),
YellowBox(),
],
);
}
运行可以得到下面的界面:
Wrap已经完美的运行了。
总结
Wrap可以通过使用不同的direction来替换Row或者Column,我们在组件可能会超出范围的时候,就可以考虑使用Wrap了。
本文的例子:https://github.com/ddean2009/learn-flutter.git
更多内容请参考 www.flydean.com
最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!
flutter系列之:永远不用担心组件溢出的Wrap的更多相关文章
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 完全免费,再也不用担心转pdf文件乱来乱去的问题了
完全免费,再也不用担心转pdf文件乱来乱去的问题了. 源代码:https://github.com/xlgwr/WpsToPdf.git 第三方插件Bye Bye... 功能说明 主要引用Wps金山办 ...
- 教会舍友玩 Git (再也不用担心他的学习)
舍友长大想当程序员,我和他爷爷奶奶都可高兴了,写他最喜欢的喜之郎牌Git文章,学完以后,再也不用担心舍友的学习了(狗头)哪里不会写哪里 ~~~ 一 先来聊一聊 太多东西属于,总在用,但是一直都没整理的 ...
- 妈妈再也不用担心别人问我是否真正用过redis了
1. Memcache与Redis的区别 1.1. 存储方式不同 1.2. 数据支持类型 1.3. 使用底层模型不同 2. Redis支持的数据类型 3. Redis的回收策略 4. Redis小命令 ...
- (转)再不用担心DataRow类型转换和空值了(使用扩展方法解决高频问题)
再不用担心DataRow类型转换和空值了(使用扩展方法解决高频问题) XML文档操作集锦(C#篇) webapi文档描述-swagger
- 锋利的js之妈妈再也不用担心我找错钱了
用js实现收银功能. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...
- 使用 crosswalk-cordova 打包sencha touch 项目,再也不用担心安卓兼容问题!
国内的安卓手机品牌众多,安卓操作系统碎片化也很严重,我们使用sencha touch 开发的应用不可避免的出现了各种无解的兼容性问题. 有时候我就在想,有没有既能支持cordova,又能让我们把Chr ...
- 【阿里云产品公测】离线归档OAS,再也不用担心备份空间了
[阿里云产品公测]离线归档OAS,再也不用担心备份空间了 作者:阿里云用户莫须有3i 1 起步 1.1 初识OAS 啥是OAS,请看官方说明: 引用: 开放归档服务(Open Archive Se ...
- 理解Linux文档的默认安全机制、隐藏属性、特殊权限,妈妈在也不用担心你从删库到跑路!!!
写在前面 前面的章节 详解Linux文档属性.拥有者.群组.权限.差异,介绍了文档的基本权限,包括读写执行(r,w,x),还有文档若干的属性,包括是否为目录(d).文件(-).链接文件(l).拥有者. ...
随机推荐
- BZOJ4569 [Scoi2016]萌萌哒(并查集,倍增)
类似\(ST表\)的思想,倍增\(log(n)\)地合并 你是我家的吗?不是就来呀啦啦啦.还有要来的吗?没了!那有多少个家就映射多少答案呀 倍增原来这么好玩 #include <iostream ...
- Redis 19 整合SpringBoot
参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Spri ...
- java-运算符以及简单运用
运算符: 1)赋值运算符:= 2)算术运算符:+-*/%,++,-- 3)关系运算符:>,<,>=,<=,==,!= boolean 4)逻辑运算符:&&,|| ...
- 谈谈你对Promise的理解
一.Promise是什么? 理解 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案(备注:旧方案是单纯使用回调函数) 具体表达: 从语法 ...
- pre 预格式化文本标签
预格式化指的是保留文本在源代码中的格式,页面中显示的和源代码中的效果完全一致.例如,原封不动地保留文本中的空白.空格.制表符等. 除非使用<pre/>标签包裹的文本,否则,浏览器不显示和源 ...
- 从0到1写一款自动为Markdown标题添加序号的Jetbrains插件
1. markdown-index 最近做了一个Jetbrains的插件,叫markdown-index,它的作用是为Markdown文档的标题自动添加序号,效果如下: 目前已经可以在Jetbrain ...
- 第七十四篇:Vue组件父子传值
好家伙, 1.组件之间的关系 在项目开发中,组件之间的最常见关系分为如下两种: (1)父子关系 (2)兄弟关系 2.父子之间的数据共享 (1)父->子共享数据 父组件向子组件共享数据需要使用自定 ...
- KingbaseES wal(xlog) 日志清理故障恢复案例
案例说明: 在通过sys_archivecleanup工具手工清理wal日志时,在control文件中查询的检查点对应的wal日志是"000000010000000000000008&quo ...
- GIN and RUM 索引性能比较
gin索引字段entry构造的TREE,在末端posting tree|list 里面存储的是entry对应的行号. 别无其他信息.rum索引,与GIN类似,但是在posting list|tree的 ...
- KFS Oracle RAC 数据解析同步配置方法
一.logminer方式解析 1.数据库配置 - Oracle 1. 数据库中需要先设置 NSL_DATE_FORMAT,命令如下,设置好以后需要重启数据库: ALTER SYSTEM SET NLS ...