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

如题，我们先看效果图

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

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

一、准备数据

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

创建一个 Goods 类

将数据添加进去

二、开始做左边的图片

这边很简单

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

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

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

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

第二行

第三行

第四行

第五行

最后装载一个column里

搞定

四、开始构造ListView

五、装在身体里

搞定！

Bingo

逻辑很简单，但是如果初学 Flutter 的话，需要熟悉一下这些 Flutter 控件的使用方法
需要注意的：
实体类 bean 的定义及构造方法的样式
NetworkImage 的使用
padding 加边距的方法的抽取
TextStyle 外部定义及引用
BoxDecoration 实现圆角矩形、背景、描边效果

谢谢大家的关注、收藏、转发，么么哒~