Flutter-防京东商城项目-编写热门推荐控件封装-04

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果2：

结构图

说明：
视频4主要写热门推荐封装：视频当时的封装不是很好。当时只是为了方便显示才这么写的。

调用的时候代码显得很累赘。

到了视频6的时候，获取数据对热门推荐进行网络数据赋值的时候都会重新对热门推荐封装一次，所以我打算在视频4直接封装好，到视频6的时候直接获取网络数据赋值就可以了，不用改来改去太麻烦了。

本章学习目标：
1.编写首页热门推荐封装控件

效果

下面的编写的代码
创建数据

  List _bestProductList = [
    {"img":"https://www.itying.com/images/flutter/list1.jpg",
      "title":"2019夏季新款气质高贵洋气阔太太有女人味中长款宽松大码",
      "price":"¥ 128.0",
      "subPrice":"¥ 88.0"
    },
    {"img":"https://www.itying.com/images/flutter/list1.jpg",
      "title":"2019夏季新款气质高贵洋气阔太太有女人味中长款宽松大码",
      "price":"¥ 128.0",
      "subPrice":"¥ 88.0"
    }
  ];

代码位置：

热门推荐封装

//热门推荐商品
  Widget _recProductItemWidget() {

    var itemWidth = (ScreenAdaper.getScreenWidth() - 30) / 2; //计算容器宽度大小

    return Container(
      padding: EdgeInsets.all(10),
      child: Wrap(
        runSpacing: 10,
        spacing: 10,
        children: this._bestProductList.map((value){
          return Container(
            padding: EdgeInsets.all(10), //设置容器内边框为10
            width: itemWidth, //设置每个小容器的宽度
            decoration: BoxDecoration(
              //设置边框
              border: Border.all(
                  color: Color.fromRGBO(233, 233, 233, 0.9), width: 1), //设置边框颜色跟变宽宽度
            ),
            child: Column(
              children: <Widget>[
                Container(
                  //添加容器抱住图片,目的是可以设置图片与最大容器之前的宽高比
                  width: double.infinity,
                  child: AspectRatio(
                    aspectRatio: 1 / 1,
                    child: Image.network(
                      'https://www.itying.com/images/flutter/list1.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Padding(
                  //添加外边框抱住文字,目的是可以让文字与上面的图片有一个顶部距离20
                  padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                  child: Text(
                    "2019夏季新款气质高贵洋气阔太太有女人味中长款宽松大码",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(color: Colors.black54),
                  ),
                ),
                Padding(
                  //添加外边框抱住文字,目的是可以让文字与上面的图片有一个顶部距离20
                  padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                  child: Stack(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.centerLeft, //控件在框的左边
                        child: Text(
                          "¥ 128.0",
                          style: TextStyle(color: Colors.red, fontSize: 16),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerRight, //控件在框的右边
                        child: Text(
                          "¥ 88.0",
                          style: TextStyle(
                            color: Colors.black54,
                            fontSize: 14,
                            decoration: TextDecoration.lineThrough, //文字中间加下划线
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        }).toList(),
      ),
    );
  }

主程序调用封装好的热门推荐方法
把红色框部分的代码复制进去就好了

SizedBox(height: ScreenAdaper.height(10),),
_recProductItemWidget(),

下一篇：
Flutter-防京东商城项目-JSON和序列化反序列化、创建模型类转换Json数据、轮播图数据渲染-05