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

代码文档

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

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

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

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

效果：

本章目标：
1.封装屏幕适配方法
2.在home页面应用 修改02的之前写下使用第三方设置宽高改为封装好的方法获取
3.编写下面图片的需求 封装成方法调用

页面效果：

布局结构

第一步： 下面是编写热门商品的代码

//热门商品
Widget _hotProductListWidget() {
  return Container(
    height: ScreenAdaper.height(234),
    padding: EdgeInsets.all(ScreenAdaper.width(20)),
    child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Column(
            children: <Widget>[
              Container(
                height: ScreenAdaper.height(140),
                width: ScreenAdaper.width(140),
                margin: EdgeInsets.only(right: ScreenAdaper.width(21)),
                child: Image.network(
                  'https://www.itying.com/images/flutter/hot${index + 1}.jpg',
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                padding: EdgeInsets.only(top: ScreenAdaper.width(10)),
                height: ScreenAdaper.height(44),
                child: Text('第${index}条'),
              ),
            ],
          );
        }),
  );
}

第二步：调用方法热门商品的方法

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

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