如何设置多个图层层叠关系_如何用Flutter制作小红书首页排布风格？

作为国内的美女网红流量圣地，小红书一直以来都是广大宅男心中的那一片乐土。虽然前段时间出了一些不这么合理合法的事情，不过单独从页面排布，App的成熟度来说，小红书没毛病。

自从其推出了新版的页面风格（借鉴自pinterest），众多厂商也无不效仿，你还不知道是什么样子？（这么长的腿，不蹬三轮可惜了。）

对，就是这种并不整齐的双列排布(瀑布流)，已经成为了众多App的主推排版方式。这一篇文章，我们就要用Flutter来进行制作此类页面排布，觉得很简单吗？嗯。。其实也并不。。

---

通过本篇文章，你将会学到

• 如何合理利用Provider获取数据
• 如何合理设置Web Request
• 如何合理设置双列不规则排布
• 如何合理劝退自己

上方导航栏设置

对于页面上方的导航栏设置，已经在之前文章中说明了相关方法，有兴趣的朋友可以移步。

马友发：运用Flutter开发一款伪知乎App会很复杂么？​zhuanlan.zhihu.com

简单来说，就是TabBar的应用，以及设置相应的Controller。

不规则双列图片排布

这是我们本期的重点，为了让大家少走弯路，我准备把我遇到的坑，都尽数告知给各位。

1.如何设置相应数据结构

只是谈谈我的做法，同样的功能可能会有多种实现的方式，也许我选择了一条困难模式。

注意看上方的小红书主页图，对于每一章图片来说，都可能拥有着不同的宽高，比如有些人喜欢横着拍，有人竖着拍，还有人爱用方形图，所以这就会导致一个问题，如果我们图方便，给每一张Image设置固定的宽高，那一定实现不了这种不规则的排布。

为了避免踩其他坑，我选择了在保存图片至服务器时，图片表中增加一列picRate，代表横宽比。从实际操作来说，我们会将图片的宽度完全显示，高度变化不定。

但是这又会碰到一个问题，现在很多人喜欢上传超长图，如果横宽比是1：10，那页面排布就花了。所以为了避免这种情况，我们同样需要设置maxRate，防止超长图的存在。

由于这一块属于后台代码逻辑，我就不扯太多了，咱们把目光移回Flutter。

我们单独看其中的一个图片框的排布。

<