Flutter移动电商实战 --(15)商品推荐区域制作
flutter -- 实战 移动 推荐 制作 15 电商
2023-09-11 14:15:29 时间
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),
效果图:
相关文章
- Flutter移动电商实战 --(51)购物车_Provide中添加商品
- Flutter移动电商实战 --(48)详细页_详情和评论的切换
- Flutter移动电商实战 --(45)详细页_说明区域UI编写
- Flutter移动电商实战 --(41)详细页_数据接口的调试
- Flutter移动电商实战 --(27)列表页_现有Bug修复和完善
- Flutter移动电商实战 --(26)列表页_使用Provide控制子类-2
- Flutter移动电商实战 --(23)分类页_左侧类别导航制作
- Flutter移动电商实战 --(37)路由_Fluro引入和商品详细页建立
- Flutter移动电商实战 --(35)列表页_上拉加载更多制作
- Flutter移动电商实战 --(13)ADBanner组件的编写
- Flutter移动电商实战 --(11)首页_屏幕适配方案和制作
- Flutter移动电商实战 --(10)使用FlutterSwiper制作轮播效果
- Flutter移动电商实战 --(7)dio基础_POST请求的使用
- Flutter移动电商实战 --(3)底部导航栏制作
- Flutter移动电商实战 --(2)建立项目和编写入口文件
- Flutter移动电商实战 --(1)项目学习记录
- Flutter实战-flutter混合开发报错:Failed to apply plugin [class ‘FlutterPlugin‘]
- flutter - 如何在Dart/Flutter中将某些元素从一个Map复制到新Map中?
- Flutter 学习之旅 之 flutter 工程目录文件夹说明,以及几个简单 Flutter 案例
- Flutter开发 -flutter百度地图接入指南,外加定位,反地理编码,这些功能组成一个类似饿了么的配送员配送界面,这些功能你心动么?