Flutter初学者必读的高级布局规则

2020 年 8 月 06 日

Flutter初学者必读的高级布局规则

假设有人正在学习 Flutter,他问你为什么有的 width:100 的 widget 宽度不是 100 像素,标准答案是让他将 widget 放在一个 Center 里面,对吗?

别这么做。

如果你这么回答他,他就会一次又一次跑回来问你新的问题,比如说为什么某些 FittedBox 无法正常工作,为什么那个 Column 溢出,或者 IntrinsicWidth 是用来做什么的,诸如此类。

这时候你应该告诉他:Flutter 布局与 HTML 布局(他之前可能接触的就是后者)有着很大不同,然后让他记住以下规则:

约束(Constraints)在下面,大小(Sizes)在上面。位置(Positions)由父项(Parents)决定。

想要真正理解 Flutter 的布局,就得搞清楚上面这条规则,所以大家都应该尽早学会它。

具体来说:

  • widget 从其父项获得自己的约束。一个“约束”是由 4 个 double 值组成的:分别是最小和最大宽度,以及最小和最大高度。
  • 然后,widget 会遍历自己的子项(children)列表。widget 会逐个向每个子项告知它们的约束(各个子项的约束可以是不同的),然后询问每个子项想要设置的大小。
  • 接下来,widget 一个个确定子项位置(在 x 轴上确定水平位置,在 y 轴上确定垂直位置)。
  • 最后,widget 将其自身大小告知父项(当然这个大小也要符合原始约束)。

原文链接:【 https://www.infoq.cn/article/jMjviktLrJHRiS2WKFyw 】。未经作者许可,禁止转载。

登录后可解锁全站优质内容

免费畅享技术公开课、顶尖技术团队访谈、一线互联网大厂技术实践

文章
视频
电子书
研究报告
立即登录
2020 年 8 月 06 日 14:18 981

评论

发布
暂无评论
发现更多内容

架构师训练营第7周——学习总结

jiangnanage

Week07作业

熊威

埋点全解析,你最关心的可视化埋点在这里!

易观大数据

一周信创舆情观察(7.13~7.19)

统小信uos

数据库 舆情 芯片

第七章总结

李白

架构师训练营——第7周作业

jiangnanage

Week07总结

熊威

关于性能测试和优化的一些总结和思考

2流程序员

架构师第七周学习总结

小蚂蚁

Gossip 协议详解

奈学教育

Gossip

Week7作业总结

丿淡忘

架构师训练营作业-web性能压测示例代码

superman

极客大学架构师训练营

SpringBoot分布式验证码登录方案

Bruce Duan

验证码 Kaptcha

架构师训练营课后总结-性能测试

superman

性能测试

考尔菲德

报销流程太慢太复杂?区块链技术引入票据系统效率翻一倍

CECBC区块链专委会

数据共享 电子票据 优化业务 可信体系

通过双 key 来解决缓存并发问题

Bruce Duan

缓存穿透 缓存并发 双key解决缓存并发

性能压测工具

武鹏

全国第一枚企业区块链电子印章诞生

CECBC区块链专委会

萝卜章 区块链印章 全流程上链 e签宝

乘风破浪的文思海辉,以及TA的行业数字化“新人设”

脑极体

中国区块链服务网络 BSN 宣布集成以太坊等六大知名公链

CECBC区块链专委会

BSN 集成公链 标准框架 底层基础设施

架构师培训第七周练习

小蚂蚁

《深度工作》学习笔记(1)

石云升

读书笔记 专注 深度工作

Gossip 协议详解

古月木易

Gossip

架构师训练营第七周作业

Bruce Xiong

第7章总结

武鹏

总结

ruettiger

week07 作业

Safufu

week07总结

Safufu

第7周作业一

ruettiger

MySQL常用函数

Bruce Duan

mysql常用函数

Flutter初学者必读的高级布局规则-InfoQ