美文网首页flutter & DartGoogle-FlutterFlutter
Flutter 实现京东商品列表页布局

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

作者: 黑键手记 | 来源:发表于2019-02-14 18:48 被阅读21次

    如题,我们先看效果图



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

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

    一、准备数据


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



    创建一个 Goods 类



    将数据添加进去

    二、开始做左边的图片

    这边很简单

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

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



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



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

    第二行



    第三行

    第四行

    第五行

    最后装载一个column里

    搞定

    四、开始构造ListView

    五、装在身体里


    搞定!

    Bingo

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

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

    相关文章

      网友评论

        本文标题:Flutter 实现京东商品列表页布局

        本文链接:https://www.haomeiwen.com/subject/wmryeqtx.html