如题,我们先看效果图
虽然不是1:1,但是也是差不多了,而且通过我代码布局中的方式,还是能够1:1实现的。
好,废话不多说,我们开始吧
一、准备数据
图片是用京东的图片,在线获取
然后用 list 进行整合
创建一个 Goods 类
将数据添加进去
二、开始做左边的图片
这边很简单
三、开始做右边的布局,这边稍微麻烦一点
首先我定义了两个方法,用来做间距
这样使用起来也比较舒服了
然后开始定义了一些下方要用到的TextStyle
这样可以让代码稍微清晰一些
然后我们开始做第一行
第二行
第三行
第四行
第五行
最后装载一个column里
搞定
四、开始构造ListView
五、装在身体里
搞定!
Bingo
逻辑很简单,但是如果初学 Flutter 的话,需要熟悉一下这些 Flutter 控件的使用方法
需要注意的:
实体类 bean 的定义及构造方法的样式
NetworkImage 的使用
padding 加边距的方法的抽取
TextStyle 外部定义及引用
BoxDecoration 实现圆角矩形、背景、描边效果
谢谢大家的关注、收藏、转发,么么哒~