使用原生开发高仿瑞幸小程序（三）：完成 Layout 布局和为你推荐模块

❝

本文由图雀社区认证作者 「曾伟@喵先森」 写作而成，图雀社区将连载其 「使用原生开发高仿瑞幸小程序系列」，点击阅读原文查看作者的 infoQ 链接，感谢作者的优质输出，让我们的技术世界变得更加美好????

❞

完成 Layout 布局

十年前，张小龙说过：“一个产品，要加多少功能，才能成为一个垃圾产品。”仅此一句话，道尽他做产品的理念。小程序就是其产品理念的最佳实践，少即是多，小即是大。今天，我们来绘制如下的界面要实现以上布局，我们需要学习以下三块内容

❝

1 通过图片的宽度计算出图片的高度 2 学会使用row组件 3 学会使用col组件

❞

一 分析布局

看看我们要实现的布局，横平竖直，方方正正，比例匀称。其实这是非常容易实现的。我们将要用到vant组件库的layout布局系统。我们可以通过其中的row来实现横向布局。使用col实现竖向布局。row和col搭配起来，就能完成我们今天的布局了。首先我们来分析一下布局，我们可以把整个布局分为上下两个row，如下：ok，接下来，我们再用col填充row，如下图： 最后一步是什么呢？我们在每个col之中放入image组件即可。至此，我们就完成了布局的分析。为什么要用row和col？因为它们有个非常厉害的属性span。利用这个属性，我们能实现按比例布局。怎么个按比例法呢？在vant的layout系统中，横向被分为24分。如果要在row中放两个一样大小的col，只需要将将col的span设为24 / 2 = 12。以此类推，如果要放三个一样宽的col，只需要将每个col的span设为24 / 3 = 8。这就实现了我们第二个row的布局。现在我们来分析一下第一个row怎么布局。我们通过观察可知，第一个Row中有两个col，他们的比例是2:1，所以第一个col的span为 （24 / 3）* 2 = 16，第二个col的span为 24 / 3 = 8 。这样就实现了2:1的布局。

二 通过图片的宽度计算出图片的高度

我们需要六张图片，把它们放在云存储中。图片资源我放在了github中，github的地址会在文章末尾放出。在这里，它们的地址是： cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/01.png cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/02.png cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/03.png cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/04.png cloud://myluckin