Flutter 实现京东商品列表页布局

如题，我们先看效果图

 

 

虽然不是1：1，但是也是差不多了，而且通过我代码布局中的方式，还是能够1：1实现的。

好，废话不多说，我们开始吧

一、准备数据

 

图片是用京东的图片，在线获取
然后用 list 进行整合

 

 

创建一个 Goods 类

 

将数据添加进去

二、开始做左边的图片

这边很简单

三、开始做右边的布局，这边稍微麻烦一点

首先我定义了两个方法，用来做间距

 

 

这样使用起来也比较舒服了
然后开始定义了一些下方要用到的TextStyle

 

这样可以让代码稍微清晰一些
然后我们开始做第一行

 

第二行

 

第三行

第四行

第五行

最后装载一个column里

搞定

四、开始构造ListView

五、装在身体里

 

搞定！

Bingo

逻辑很简单，但是如果初学 Flutter 的话，需要熟悉一下这些 Flutter 控件的使用方法
谢谢大家的关注，么么哒~