Categories
程式開發

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】。未经作者许可,禁止转载。