![6c06193e064f23804c2c8eefea6f2a1f.png](https://i-blog.csdnimg.cn/blog_migrate/2d69dccdf662b1474db89eaf984f299f.jpeg)
作为国内的美女网红流量圣地,小红书一直以来都是广大宅男心中的那一片乐土。虽然前段时间出了一些不这么合理合法的事情,不过单独从页面排布,App的成熟度来说,小红书没毛病。
自从其推出了新版的页面风格(借鉴自pinterest),众多厂商也无不效仿,你还不知道是什么样子?(这么长的腿,不蹬三轮可惜了。)
![d58b93663e73231f093ffbedf0db76d1.png](https://i-blog.csdnimg.cn/blog_migrate/67adb7cb378f8500e4e53a5e6d5bb778.jpeg)
对,就是这种并不整齐的双列排布(瀑布流),已经成为了众多App的主推排版方式。这一篇文章,我们就要用Flutter来进行制作此类页面排布,觉得很简单吗?嗯。。其实也并不。。
![310aadc941b2d224c5a68eb9eba747f3.png](https://i-blog.csdnimg.cn/blog_migrate/e38068bdf86484401589eaf2a34584ad.jpeg)
通过本篇文章,你将会学到
- 如何合理利用Provider获取数据
- 如何合理设置Web Request
- 如何合理设置双列不规则排布
- 如何合理劝退自己
上方导航栏设置
对于页面上方的导航栏设置,已经在之前文章中说明了相关方法,有兴趣的朋友可以移步。
马友发:运用Flutter开发一款伪知乎App会很复杂么?zhuanlan.zhihu.com![9874f19b1b25e521a0a854df71cb04c0.png](https://i-blog.csdnimg.cn/blog_migrate/23325109fb9e0073f80d52d401ab9c78.jpeg)
简单来说,就是TabBar的应用,以及设置相应的Controller。
不规则双列图片排布
这是我们本期的重点,为了让大家少走弯路,我准备把我遇到的坑,都尽数告知给各位。
1.如何设置相应数据结构
只是谈谈我的做法,同样的功能可能会有多种实现的方式,也许我选择了一条困难模式。
注意看上方的小红书主页图,对于每一章图片来说,都可能拥有着不同的宽高,比如有些人喜欢横着拍,有人竖着拍,还有人爱用方形图,所以这就会导致一个问题,如果我们图方便,给每一张Image设置固定的宽高,那一定实现不了这种不规则的排布。
![af8c8582a95ba0e8e9d777c44a26033e.png](https://i-blog.csdnimg.cn/blog_migrate/660c360c8419e79afadbc0adef2d56ad.png)
为了避免踩其他坑,我选择了在保存图片至服务器时,图片表中增加一列picRate,代表横宽比。从实际操作来说,我们会将图片的宽度完全显示,高度变化不定。
但是这又会碰到一个问题,现在很多人喜欢上传超长图,如果横宽比是1:10,那页面排布就花了。所以为了避免这种情况,我们同样需要设置maxRate,防止超长图的存在。
![917449305a92cb9ec02d0f866bf29692.png](https://i-blog.csdnimg.cn/blog_migrate/1cfac6617da4747b46db33dabecf16fd.jpeg)
由于这一块属于后台代码逻辑,我就不扯太多了,咱们把目光移回Flutter。
我们单独看其中的一个图片框的排布。
<