预判 LazyVGrid 布局 - Adaptive篇

1,767 阅读3分钟

写在开头

上一篇通过对flexible布局的介绍,基本了解了Grid布局的计算规则,下面这篇文章,就通过对三种布局的组合使用,验证规则。最终完善函数,实现一个能够帮助我们预判LazyVGrid布局的工具。

内容和上一篇一样,可能还是以计算为主,内容有点枯燥,规则基本就是上一篇结尾总结的结论。不想再看一遍我加减乘除的老哥们,直接下载Demo查看效果吧。

加减乘除开始

adaptive

GridItem(.adaptive(minimum: 50, maximum: 100))

image.png

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))

image.png

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))

image.png

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限制的最小值,可用于计算最多显示多少列,对于最终显示的宽度,没有强限制。


Demo已经完善了上一篇缺少adaptive宽度计算的坑,效果如下:

GridItem(.flexible(minimum: 100)),
GridItem(.fixed(100)),
GridItem(.flexible(minimum: 40)),
GridItem(.flexible(minimum: 30))

image.png