Flutter Widgets 之 Expanded和Flexible
老
孟
一个
有态度
的程序员
Expanded和Flexible是控制Row、Column、Flex的子控件如何布局的控件,Expanded和Flexible可以扩张填满主轴剩余空间,如何确认主轴和交叉轴可以查看[Flutter Widgets 之 Row和Column](),这篇文章详细介绍了主轴和交叉轴。
Expanded和Flexible的区别
首先看一下Expanded和Flexible的构造函数:
通过源代码发现:
- Expanded 继承自Flexible。
- Flexible 中fit参数默认是FlexFit.loose,而Expanded固定为FlexFit.tight。
因此如果在使用Flexible时,设置fit为FlexFit.tight,那么Flexible和Expanded就一模一样了,代码如下:
Flexible(
fit: FlexFit.tight,
...
)
因此Expanded和Flexible的区别就是FlexFit.tight和FlexFit.loose的区别:
- tight:必须(强制)填满剩余空间。
- loose:尽可能大的填满剩余空间,但是可以不填满。
看下面2个例子就能看出其中的区别:
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)
效果如图:
中间的红色的控件是Container,此时填满了剩余空间,我们给Container添加子控件Text,代码如下:
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
child: Text('Container',style: TextStyle(color: Colors.white),),
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)
效果图:
神奇出现了,此时没有填满剩余空间,我们再给Container添加对齐方式,代码如下:
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: Container(
color: Colors.red,
height: 50,
alignment: Alignment.center,
child: Text('Container',style: TextStyle(color: Colors.white),),
)
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)
效果图:
此时又填满剩余空间,大家是否还记得Container控件的大小是调整的吗?Container默认是适配子控件大小的,但当设置对齐方式时Container将会填满父控件,在Flutter Widgets 之 Container中已经详细介绍,因此是否填满剩余空间取决于子控件是否需要填满父控件。
如果把Flexible中子控件由Container改为OutlineButton,代码如下:
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Flexible(
child: OutlineButton(
child: Text('OutlineButton'),
),
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)
OutlineButton正常情况下是不充满父控件的,因此最终的效果应该是不填满剩余空间,效果如图:
如果想让OutlineButton填满剩余空间只需将Flexible改为Expanded,代码如下:
Row(
children: <Widget>[
Container(
color: Colors.blue,
height: 50,
width: 100,
),
Expanded(
child: OutlineButton(
child: Text('OutlineButton'),
),
),
Container(
color: Colors.blue,
height: 50,
width: 100,
),
],
)
效果如图:
到这里有没有感觉FlexFit.loose很鸡肋啊,如果不想填满剩余空间直接不使用这个组件不就可以了吗,既然使用`Expanded `和`Flexible`就说明想填满剩余空间,可能是我的需求还没有那么变态吧。
建议:如果想填满剩余空间直接使用`Expanded `更方便。
这里总结下Expanded和Flexible的区别:
- Expanded:强制填满剩余空间
- Flexible:不强制填满剩余空间,是否填满剩余空间取决于子控件是否需要填满父控件。
flex
参数flex表示权重(类似于Android中的weight),在Column中添加3个子控件,flex分别为1、2、3,代码如下:
Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('1 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.red,
alignment: Alignment.center,
child: Text('2 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: Text('3 Flex/ 6 Total',style: TextStyle(color: Colors.white),),
),
),
],
)
效果如图:
子控件占比 = 当前子控件flex/所有子控件flex只和。
- 《外媒Cointelegraph专访Qtum量子链Jordan Earls》—浅谈目前Dapps的主要问题
- ASP .Net Core 2.0 修改默认端口
- 不满一岁的潜力股:2017年3D打印机器人盘点
- Reporting Service报表开发
- 不要信任云:这不只是安全的问题
- C#温故而知新—闲话.Net
- c# IO&&线程 打造 定时打开指定程序
- 前FDIC主席:比特币政策不应打击加密货币发展
- 任何人都不应该控制区块链供应链
- c# IO操作(带进度的文件复制器,读取文本文件的指定行)
- 高科技来了!玩游戏一样开船的时代来了……
- C++库大全
- 人工智能行业前景预测 全球市场或超2700亿元
- Arxiv网络科学论文摘要14篇
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL事务与MVCC如何实现的隔离级别
- 1.5w字,30图带你彻底掌握 AQS!
- 原创 | codeforces 1419D2,有趣的思维题
- 如何实现四元数的运算
- 最牛一篇布隆过滤器详解
- 编写一个IDEA插件之:开发环境准备那些坑
- 编写一个IDEA插件之:使用PSI分析Java代码
- 编写一个IDEA插件之:自动生成Java代码
- 编写一个IDEA插件之:事件监听
- 重新加载故障节点上的 Ceph 卷
- 一个Spring Bean从诞生到逝去的九次人生转折!
- 原创 | 详解git rebase,让你走上git大神之路
- 启用chrome浏览器内置的二维码生成插件
- ZeroLogon漏洞(CVE-2020-1472)防御性指南
- 原创 | 随机数大家都会用,但是你知道生成随机数的算法吗?