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

如题,我们先看效果图

 

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

 

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

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

一、准备数据

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

 

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

 

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

 

创建一个 Goods 类

 

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


将数据添加进去

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

二、开始做左边的图片

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

这边很简单

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

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

 

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

 

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

 

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


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

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

 

第二行

 

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


第三行

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


第四行

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


第五行

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


最后装载一个column里

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


搞定

四、开始构造ListView

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

五、装在身体里

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

 

搞定!

Bingo

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