前端开发进阶篇——Flutter实战之商城首页03
1. 新人专享模块编写
页面效果如下：
代码如下：
class NewUser extends StatelessWidget {
final List userImage;
const NewUser({Key key, this.userImage}) : super(key: key);
@override
Widget build(BuildContext context) {
// print(userImage[0]);
return Container(
child: InkWell(
onTap: () {},
child: Image.network(userImage[0]['image']),
));
}
}
这个模块比较简单，就是一张图片。我们同样使用NewUser的构造函数进行页面数据获取，再将数据封装到InWell组件中返回。
2. 秒杀商品模块编写
页面效果如下：
秒杀商品是可以实现左右滑动的。我们将秒杀商品扥为了两部分：顶部标题和秒杀商品列表项，其中的秒杀商品项又包括商品图片和价格。
首先还是利用构造函数获取数据。
标题组件：我们了Container组件进行封装并返回。
Widget _quickTitle() {
return Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(0, 2.0, 0, 5.0),
decoration: BoxDecoration(
color: Colors.white,
border:
Border(bottom: BorderSide(width: 1.0, color: Colors.black12))),
child: Text("商品秒杀",
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold)));
}
秒杀商品列表：我们返回了Container组件，它里面使用了ListView组件封装了每一个商品子项。
Widget _quickList() {
return Container(
height: ScreenUtil().setHeight(405),
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: quickProductList.length,
itemBuilder: (context, index) {
return _quiclItem(index);
}),
);
}
秒杀商品子项：返回的是InkWell组件，它里面是分别用Container、Column封装了每一个商品项的图片、价格。
Widget _quiclItem(index) {
return InkWell(
onTap: () {
print("商品详情");
},
child: Container(
height: ScreenUtil().setHeight(405),
width: ScreenUtil().setWidth(140),
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
left: BorderSide(width: 1, color: Colors.black12),
bottom: BorderSide(width: 1, color: Colors.black12),
)),
child: Column(
children: <Widget>[
Image.network(quickProductList[index]['image']),
Text(quickProductList[index]['price']),
Text(quickProductList[index]['primaryPrice'],
style: TextStyle(
decoration: TextDecoration.lineThrough, color: Colors.grey))
],
),
),
);
}
3. 火爆专区模块编写
页面效果如下：
由于火爆专区的数据是另外的接口获得，所以我们定义了一个获取数据接口，在此页面初始化时调用加载数据。火爆专区和秒杀商品专区类似，也是包括两部分：标题和商品项，商品项包括图片和价格。
其代码如下：
//火爆专区标题
Widget hotTitle = Container(
// margin: EdgeInsets.only(top: 10.0),
padding: EdgeInsets.all(5.0),
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
border: Border(bottom: BorderSide(width: 1, color: Colors.black12))),
child: Text('商品秒杀专区',
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
);
//火爆专区子项
Widget _wrapList() {
List<Widget> listWidget = hotGoodsList.map((val) {
return InkWell(
onTap: () {
print('点击了商品秒杀商品');
},
child: Container(
width: ScreenUtil().setWidth(202),
// color: Colors.white,
padding: EdgeInsets.all(5.0),
margin: EdgeInsets.only(bottom: 3.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
left: BorderSide(width: 1, color: Colors.black12),
bottom: BorderSide(width: 1, color: Colors.black12))),
child: Column(
children: <Widget>[
Image.network(
val['image'],
width: ScreenUtil().setWidth(375),
),
Text(
val['discribe'],
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(13)),
),
Row(
children: <Widget>[
Text(
'${val['price']}',
style: TextStyle(
color: Colors.red, fontSize: ScreenUtil().setSp(26)),
)
// Text(
// '￥${val['price']}'
],
)
],
),
));
}).toList();
return Wrap(
spacing: 1,
children: listWidget,
);
}
//商品秒杀专区组合
Widget _hotGoods() {
return Container(
child: Column(
children: <Widget>[
hotTitle,
_wrapList(),
],
));
}
到这里我们商城首页的全部内容就介绍完毕了。
- 点赞
- 收藏
- 关注作者
评论（0）