写在开头
上一篇通过对flexible布局的介绍,基本了解了Grid布局的计算规则,下面这篇文章,就通过对三种布局的组合使用,验证规则。最终完善函数,实现一个能够帮助我们预判LazyVGrid布局的工具。
内容和上一篇一样,可能还是以计算为主,内容有点枯燥,规则基本就是上一篇结尾总结的结论。不想再看一遍我加减乘除的老哥们,直接下载Demo查看效果吧。
加减乘除开始
adaptive
GridItem(.adaptive(minimum: 50, maximum: 100))
复制代码
1、以300
作为起始布局,因为adaptive为了显示尽可能多
的列,最小值50
,则最多显示5
列(有间距),减去 间距 300 - 4 * 8 = 268
,得到每一列的宽度为 268 / 5 = 53.6
, 所以计算宽度为 4 * 8 + 53.6 * 5 = 300
2、 以计算宽度 300
开始,重复步骤一进行渲染
adaptive + adaptive
GridItem(.adaptive(minimum: 50, maximum: 100)),
GridItem(.adaptive(minimum: 40, maximum: 100))
复制代码
1、以300
作为起始布局,两列每列宽度为 (300 - 8) / 2 = 146
,对于单个adaptive显示尽可能多的列,最小值为50
,最多显示 2
列(间距8
), 所以每列宽度为 (146 - 8) / 2 = 69
, 剩余宽度为 146
, 最小值为 40
,最多显示3
列,每列宽度为 146 - 8 * 2 / 3 = 43.33
, 最终的计算宽度为 300
2、 以计算宽度 300
开始,重复步骤一进行渲染
单独使用经计算验证和上一篇得到的结论是一致的。 下边我们进行组合使用验证
flexible + fixed + adaptive + fixed
GridItem(.flexible(minimum: 100)),
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 100)),
GridItem(.fixed(100))
复制代码
1、以300
最为起始布局, 减去间距和固定宽度 300 - 8 * 3 - 100 - 100 = 76
, 剩余两列,每列布局宽度为 76 / 2 = 38
, 第一列flexible
最小值为100
,占用100, 剩余宽度 76 - 100 = -24
, 第二列显示尽可能多,此时只能显示一列,宽度为 0
,总计算宽度为 8 * 3 + 100 + 100 + 100 = 324
.
2、以324
作为渲染宽度,324 - 8 * 3 - 100 - 100 = 100
, 剩余两列,每列布局宽度为 50
, 第一列flexible
最小值为100
,占用100, 剩余宽度 100 - 100 = 0
, 第二列显示尽可能多此时只能显示一列,宽度为0
,最终渲染结果100 + 8 + 100 + 8 + 0 + 8 + 100 = 324
计算的效果如出一辙,没有什么好说的了,也就不再举栗子了,上方的例子的是计算结果已经证明了我们的结论正确。唯一需要注意的就是adaptive限制的最小值,可用于计算最多显示多少列,对于最终显示的宽度,没有强限制。