Flutter 弹性布局的基石: flex 和 flexible
Flutter 弹性布局的基石 是 flex 和 flexible。理解了这两个 widget,后面的row,column 就都轻而易举了。本文用示例的方式详细介绍 flex 的布局算法。
flex 布局算法
先布局 flex 为 0 或 null 的 child。在 main 轴上 child 受到的约束是 unbounded。如果 crossAxisAlignment 是 CrossAxisAlignment.stretch, 在 cross 轴上的约束是 tight,值是 cross 轴上收到约束的最大值。否则,在 cross 轴上的约束是 loose。
为 flex 不为 0 的 child 申请空间,flex 值越大,按比例得到的可以占用的空间越大。
为 flex 不为 0 的 child 分配空间。main 轴方向的最大值是第二步申请到的空间的值。如果 child 的fit 参数为 FlexFit.tight,child在主轴方向 受到 tight 约束,值为第二步申请到的空间的值。如果 child 的 fit 参数为 FlexFit.loose,child在主轴方向 受到 loose 约束。child在主轴方向可以任意小,但不能超第二步申请到的空间的值。
flex cross 轴的高度是能包住所有 child,并不超过最大约束。
flex main 轴的宽度与 mainAxisSize 有关。如果 mainAxisSize 是 MainAxisSize.max,main 轴的宽度是最大约束值,否则是能包住所有child ,但不超过最大约束。
flex自己的尺寸和 child 的尺寸确认后,根据 mainAxisAlignment 和 crossAxisAlignment 摆放 child。
看了算法并不直观,下面通过实例讲解。
非弹性组件在 main 轴受到的约束是 unbounded
```
Flex(
direction: Axis.horizontal,
children: [
Container(
width: 1000,
height: 100,
color: Colors.red[200],
),
],
)
我们看到,Flex 在主轴的约束是 unbounded,所以 container 可以取值 1000,超出屏幕,显示警告。flex 值越高,可以分到的空间越大。但能否占满空间取决于 fit 参数
------------------------------------![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c27abc9da268421a8c38ffc11567765f~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)```
Flex(direction: Axis.horizontal,children: [Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),),Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),),Container(width: 50,height: 100,color: Colors.red[200],),],)
假设宽一共 200,布局过程:
- 先分配非弹性 child 红色块 50。
- 绿色和蓝色块是弹性块,它们会瓜分剩下的 150,按 flex 值,绿色块应该分 100,蓝色块分 50。
- 绿色块的 fit 值是 loose,flex 不强制它把空间占满,所以它只点了 50。蓝色块的 fit 值 是 loose,它的 width 比 50 大 flex 会强制它的宽度为 50。效果就是右边还剩下 50,那本来是分给绿色块的。
如果绿色块的 fit 值修改为 FlexFit.tight,剩下的空间就会被占满了,这个时候 width 会被忽略。
flexible 的作用就是为了修改 child 的 parentData,给 child 增加 fit, flex 布局信息。让 flex 根据这些信息为 child 布局。
Expanded
class Expanded extends Flexible {const Expanded({super.key,super.flex,required super.child,}) : super(fit: FlexFit.tight);
}
Expanded 其实就是 fit 固定为 FlexFit.tight 的 flexible。其实可以直接用 flexible 的,但因为 Expanded 太常用了,所以单独加了一个类。同时 Expanded 也更加有语义。Expanded 和 flexible 的关系就像 Center 和 Align的一样。
Spacer
class Spacer extends StatelessWidget {const Spacer({super.key, this.flex = 1}): assert(flex != null),assert(flex > 0);final int flex;@overrideWidget build(BuildContext context) {return Expanded(flex: flex,child: const SizedBox.shrink(),);}
}
Spacer 的 child 是 SizedBox.shrink(),用来占位,没有实际的意义。Spacer 是 Expanded 的包装,就是为了占空位用的。
至于摆放 child 的规则大同小异,如果有不明白的同学可以看 这篇 Flutter Wrap 图例
Flex 和 Flexible 如果都掌握了,Row 和 Colmn 自然就会了。因为 Row 只是 direction 为 Axis.horizontal 的 Flex,Column 只是 direction 为 Axis.vertical 的 Flex。
作者:IAM17
原文链接:(https://juejin.cn/post/7180962741950087224)
最后
如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。
如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。
相对于我们平时看的碎片化内容,这份笔记的知识点更系统化,更容易理解和记忆,是严格按照知识体系编排的。
全套视频资料:
一、面试合集
二、源码解析合集
三、开源框架合集
欢迎大家一键三连支持,若需要文中资料,直接点击文末CSDN官方认证微信卡片免费领取↓↓↓
Flutter 弹性布局的基石: flex 和 flexible相关推荐
- Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
- flutter 弹性布局 flex
弹性布局 flex flex可以沿着水平或者垂直方向排列子组件,row和coloumn都继承自flex,参数基本相同,唯一有一个关键参数是Expanded,该参数在row和column中也存在,该参数 ...
- 弹性布局(display:flex;)属性详解
一.Flex布局-前言 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小 ...
- CSS3 弹性布局盒模型 Flex布局
Web 应用中,布局设计是非常重要的一部分.随着响应式设计的盛行,一般都要求 Web 应用能够适配不同尺寸的设备.响应式设计中最重要的一环就是布局,需要根据窗口尺寸来调整布局,从而改变元素的尺寸和位置 ...
- html弹性布局平均分配,flex弹性布局.html
弹性布局 .box { height: 300px; background-color: #ccc; /* 重点记住下面三个:display: flex; justify-content:center ...
- flex弹性布局中的flex:1的理解
弹性布局是非常常用,且好用的布局方式.这种布局方式可以帮我们处理大部分布局问题. 我们知道,必须给父元素设置display:flex:使父元素变成弹性容器.然后在父元素的子元素里设置项目属性,才有效果 ...
- 弹性布局----Flex
1.背景 传统的布局方案基于盒状模型,依赖display + position + float 的方式实现,灵活性较差,对于那些特殊的布局非常不方便. 2009年,W3C提出了一种新的方案--Flex ...
- 弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录 弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性 以下六个属性设置在Flex容器上 flex-direction属性 ...
- CSS布局之弹性布局
什么是Flex Flex 是 Flexible Box 的缩写,意为"弹性布局"或者"弹性盒子",是 CSS3 中的一种新的布局模式,通过给元素设置displa ...
最新文章
- Swagger3.0 天天刷屏,真的香吗?
- 待续未完- 自己写后台内容管理程序 - 完全手写不用框架的
- nginx+uwsgi+flask配置记录
- wxWidgets:你好,世界
- python观察日志(part9)--数据库与pickle模块
- 中国民企老板要牢记的四句话
- 服务器系统的功能,服务器操作系统有什么功能
- iOS 中UITableViewController 中tableView 会被状态栏覆盖的问题
- php装curl拓展出错
- vue pinyin-match下拉框设置拼音模糊搜索
- 网线制作ppt_制作网线图解ppt课件
- 台式计算机怎么把声音输出,台式电脑音频管理器的设置教程 台式电脑音响没声音怎么弄...
- 基于 MATLAB 的图像中汉字识别
- c语言里的除法运算定律,加法乘法运算,乘法需要打括号吗?
- SEP(标准必要专利)
- C语言---学生奖学金评定系统设计
- 领导说我对任务的理解是错的
- python搬家具_python3 摆放家具练习
- Python OpenCV _1基本操作(画图,循环播放图像,鼠标事件,读取中文路径中的图片)
- android 短信数据库在哪个文件夹,安卓手机的短信备份后存到了哪个文件夹下
热门文章
- 改变一下桌面样式,据说有利于保护眼睛
- NBIOT下行harq
- 转:优秀的管理者是下属的帮手
- “智慧交通”转型升级+创新发展策略
- C++:PAT 1002 写出这个数 读入一个正整数 n,计算其各位数字之和,用汉语拼音写出和的每一位数字。
- 什么是RIA AIR Flex
- 【python】计算偏度和峰度
- 跨境电商商城独立站_是什么?
- 后端处理数据保存请求流程multer+ajax 数据库添加数据 前端与后端的数据联通 在business_list 页面进行数据处理 @stage3---week3--day4
- Android活动,控件,碎片,广播,数据库小总结