1、推荐商品类的编写

这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的。

/*商品推荐*/
class Recommend extends StatelessWidget {
  final List  recommendList;   Recommend({Key key, this.recommendList}) : super(key: key);
}

2、推荐标题内部方法的编写

实际开发中,要尽量减少嵌套,我们需要把复杂的组件,单独拿出一个方法进行编写。这里就把商品推荐标题单独拿出一个方法进行编写。

/*推荐商品标题*/
Widget _titleWidget(){
 return Container(
   alignment: Alignment.centerLeft,
   padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0),
   decoration: BoxDecoration(
     color:Colors.white,
     border: Border(
       bottom: BorderSide(width:0.5,color:Colors.black12)
     )
   ),
   child:Text(
     '商品推荐',
     style:TextStyle(color:Colors.pink)
     )
 );
}

3、推荐商品单独项编写

把推荐商品的每一个子项我们也分离出来。每一个子项都使用InkWell,这样为以后的页面导航作准备。里边使用了Column,把内容分成三行。

先不充关于InkWel的使用

InkWell有的叫溅墨效果,有的叫水波纹效果。使用场景是给一些无点击事件的部件添加点击事件时使用(也支持长按、双击等事件),同时你也可以去修改它的颜色和形状。

InkWell(
  borderRadius: BorderRadius.circular(8.0), /*圆角*/
  splashColor: Colors.transparent, /*溅墨色(波纹色)*/
  highlightColor: Colors.transparent, /*点击时的背景色(高亮色)*/
  onTap: () {},/*点击事件*/
  child: Container(),
);

再回访推荐商品的编写

Widget _item(index){
    return InkWell(
      onTap: (){},
      child: Container(
        height: ScreenUtil().setHeight(330),
        width: ScreenUtil().setWidth(250),
        padding: EdgeInsets.all(8.0),
        decoration:BoxDecoration(
          color:Colors.white,
          border:Border(
            left: BorderSide(width:0.5,color:Colors.black12)
          )
        ),
        child: Column(
          children: <Widget>[
            Image.network(recommendList[index]['image']),
            Text('¥${recommendList[index]['mallPrice']}'),
            Text(
              '¥${recommendList[index]['price']}',
              style: TextStyle(
                decoration: TextDecoration.lineThrough,
                color:Colors.grey
              ),
            )
          ],
        ),
      ),
    );
}

4、横向列表组件的编写

横向列表组件也进行单独编写,以减少嵌套,这样我们就把每一个重要的部分都进行了分离。

Widget _recommedList(){

  return Container(
    height: ScreenUtil().setHeight(330),
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: recommendList.length,
      itemBuilder: (context,index){
        return _item(index);
      },
    ),
  );
}

有了这三个基本组件,最后我们在build方法里进行组合,形成商品推荐区域。

@override
Widget build(BuildContext context) {
return Container(
   height: ScreenUtil().setHeight(380),
   margin: EdgeInsets.only(top: 10.0),
   child: Column(
     children: <Widget>[
       _titleWidget(),
       _recommedList()
     ],
   ),
);
}

5、整个组件的类代码如下

商品推荐
class Recommend extends StatelessWidget {
  final List  recommendList;   Recommend({Key key, this.recommendList}) : super(key: key);   @override
  Widget build(BuildContext context) {
    return Container(
       height: ScreenUtil().setHeight(380),
       margin: EdgeInsets.only(top: 10.0),
       child: Column(
         children: <Widget>[
           _titleWidget(),
           _recommedList()
         ],
       ),
    );
  } 推荐商品标题
  Widget _titleWidget(){
     return Container(
       alignment: Alignment.centerLeft,
       padding: EdgeInsets.fromLTRB(10.0, 2.0, 0,5.0),
       decoration: BoxDecoration(
         color:Colors.white,
         border: Border(
           bottom: BorderSide(width:0.5,color:Colors.black12)
         )
       ),
       child:Text(
         '商品推荐',
         style:TextStyle(color:Colors.pink)
         )
     );
  }   Widget _recommedList(){       return Container(
        height: ScreenUtil().setHeight(330),
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: recommendList.length,
          itemBuilder: (context,index){
            return _item(index);
          },
        ),
      );
  }   Widget _item(index){
    return InkWell(
      onTap: (){},
      child: Container(
        height: ScreenUtil().setHeight(330),
        width: ScreenUtil().setWidth(250),
        padding: EdgeInsets.all(8.0),
        decoration:BoxDecoration(
          color:Colors.white,
          border:Border(
            left: BorderSide(width:0.5,color:Colors.black12)
          )
        ),
        child: Column(
          children: <Widget>[
            Image.network(recommendList[index]['image']),
            Text('¥${recommendList[index]['mallPrice']}'),
            Text(
              '¥${recommendList[index]['price']}',
              style: TextStyle(
                decoration: TextDecoration.lineThrough,
                color:Colors.grey
              ),
            )
          ],
        ),
      ),
    );
  }
}

6、准备数据并进行调用

在 HomePage build 中继续添加:

List<Map> recommendList = (data['data']['recommend'] as List).cast(); 
 Recommend(recommendList:recommendList),    

效果图:

15-Flutter移动电商实战-商品推荐区域制作的更多相关文章

  1. Flutter移动电商实战 --(15)商品推荐区域制作

    1.推荐商品类的编写 这个类接收一个List参数,就是推荐商品的列表,这个列表是可以左右滚动的. /*商品推荐*/ class Recommend extends StatelessWidget { ...

  2. Flutter移动电商实战 --(1)项目学习记录

    1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...

  3. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  4. Flutter移动电商实战 --(51)购物车_Provide中添加商品

    新加provide的cart.dart页面 引入三个文件.开始写provide类.provide需要用with 进行混入 从prefs里面获取到数据,判断有没有数据,如果有数据就返转正List< ...

  5. Flutter移动电商实战 --(37)路由_Fluro引入和商品详细页建立

    https://github.com/theyakka/fluro pages/details_page.dart新建页面 使用路由 先添加路由插件的引用 fluro: ^1.4.0 如果网络上下载不 ...

  6. Flutter移动电商实战 --(33)列表页_子类和商品列表交互效果

    主要实现点击小类下面的列表跟着切换 获取右侧下面的列表信息,即要传递大类的id也要传递小类的,所以需要把左侧的大类的id也要Provide化 可以看下网站上的接口说明: https://jspang. ...

  7. Flutter移动电商实战 --(28)列表页_商品列表后台接口调试

    主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceUrl='http://test.ba ...

  8. Flutter移动电商实战 --(53)购物车_商品列表UI框架布局

    cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartPage单词拼错了,这里改过来防止后面 ...

  9. Flutter移动电商实战 --(30)列表页_商品列表UI界面布局

    小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用ListView,我们把它布局成下图这种形式 ...

随机推荐

  1. spring data jpa碰到的坑

    1.不能从别的类的repository那里 执行另一个类的sql,这样映射会失败. 2.有entity,就要有repository,并且还要有id注解 3.还要多表联查未测试,估计要用map去映射出来 ...

  2. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  3. 2019-7-01 python基础数据类型

    一.python的注释 python的注释分类: 单行注释:  #    单行注释 多行注释:(可以是三个单也可以是三个双) ''' 单三引号多行注释 ''' """ 双 ...

  4. javascript document.createElement() document.createTextNode() appendChild()

    //--------------document.createElement("div") var div = document.createElement("div&q ...

  5. Jenkins服务使用 宿主机的docker、docker-compose (Jenkins 执行sudo命令时出现“sudo: no tty present and no askpass program specified”,以及 docker-compose command not found解决办法)

    若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11681474.html 原因: 本人最近正在尝试CI/CD,所以就使用了 Jen ...

  6. 了解下Scala隐式转换与柯理化

    之前有看过kafka源码,有很多implict声明的方法,当时看的一头雾水,今天趁着空闲,了解下scala 的隐式转换和柯理化相关语法知识. 隐式转换 需要类中的一个方法,但是这个类没有提供这样的一个 ...

  7. django 无限层级的评论

    一.摘要 拓展 django 官方的评论库,为评论提供无限层级的支持. 二.demo演示 访问链接: https://github.com/zmrenwu/django-mptt-comments 下 ...

  8. Expected linebreaks to be 'LF' but found 'CRLF'.

    解决方法 在rules中加入 "linebreak-style": [0 ,"error", "windows"], 如果你需要知道原理,请 ...

  9. python内存机制与垃圾回收、调优手段

    目录 一.python的内存机制 二.python的垃圾回收 1. 引用计数 1.1 原理: 1.2 优缺点: 1.4 两种情况: 2. 标记清除 2.1 原理: 2.2 优缺点: 3. 分代回收 3 ...

  10. 防止用户重复提交表单数据,session方式,js方式

    1. 使用session的方式创建Token令牌解决 创建一个生成令牌的工具类,在该类中有返回类的对象,生成token的方法 public class TokenUtil { /* *单例设计模式(保 ...