flutter 购物车功能

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/http/Api.dart';
import 'package:flutter_app/http/ApiService.dart';
import 'package:flutter_app/ui/main/bean/ShopCartBean.dart';
import 'package:flutter_slidable/flutter_slidable.dart';//侧滑删除
class ShopPage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new ShopPageState();
}
class ShopPageState extends State<ShopPage> {
List<ShopCartResult> _list = new List();
var money = 0.00;
var selectCount = 0;
var listItemCount = 0;
@override
void initState() {
// TODO: implement initState
super.initState();
_categoryChild();
}
bool isSelect = false;
void _categoryChild() {
ApiService.getLogin("toBuy/list", "POST", null, (callBack) {
if (callBack != null) {
var categoryChildBean = ShopCartBean.fromJson(callBack);
if (categoryChildBean.success) {
_list.clear();
_list = categoryChildBean.result;
isSelect = _viewSelect();
_listMoneyCount();
}
}
}, (errorCallBack) => {});
}
_viewSelect() {
var count = 0;
for (var i = 0; i < _list.length; i++) {
if (_list[i].selected) {
count++;
}
}
return count == _list.length;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
automaticallyImplyLeading: false, //左边按钮
centerTitle: true,
title: new Text(
"购物车($listItemCount)",
style: new TextStyle(color: Colors.white, fontSize: 20.0),
),
backgroundColor: Colors.red,
),
body: new Column(
children: <Widget>[
new Expanded(
child: Container(
child: new ListView(
children: _itemView(),
padding: new EdgeInsets.only(bottom: 10),
),
double.infinity,
color: Colors.grey,
)),
Row(
children: <Widget>[
new Checkbox(
value: isSelect,
activeColor: Color.fromARGB(255, 255, 67, 78),
onChanged: (bool) {
for (var i = 0; i < _list.length; i++) {
_list[i].selected = !isSelect;
for (var j = 0; j < _list[i].goodsToBuyDtos.length; j++) {
_list[i].goodsToBuyDtos[j].selected = !isSelect;
}
}
isSelect = !isSelect;
_listMoneyCount();
setState(() {});
}),
Text("全选"),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"不含运费 ",
style: TextStyle(color: Colors.grey, fontSize: 10),
),
Text(
"合计:",
style: TextStyle(color: Colors.black, fontSize: 12),
),
Text(
"￥",
style: TextStyle(color: Colors.red, fontSize: 12),
),
Text(
"$money",
style: TextStyle(
color: Colors.red,
fontSize: 16,
),
),
Container(
alignment: Alignment.center,
child: new Text(
"结算($selectCount)",
style: TextStyle(color: Colors.white),
),
130,
height: 50,
color: Colors.red,
)
],
),
)
],
)
],
),
);
}
List<Widget> _itemView() {
List<Widget> listWidget = List();
for (var i = 0; i < _list.length; i++) {
var item = _list[i].selected;
listWidget.add(new Card(
color: Colors.white,
elevation: 0,
margin: new EdgeInsets.only(left: 10, right: 10, top: 10),
child: Column(
children: _itemViewChild(i, item),
),
));
}
return listWidget;
}
List<Widget> _itemViewChild(int index, bool item) {
var row = new Row(
children: <Widget>[
new Checkbox(
value: item,
activeColor: Color.fromARGB(255, 255, 67, 78),
onChanged: (bool) {
_list[index].selected = !item;
for (var j = 0; j < _list[index].goodsToBuyDtos.length; j++) {
_list[index].goodsToBuyDtos[j].selected = !item;
}
isSelect = _viewSelect();
_listMoneyCount();
setState(() {});
}),
Text(null != _list[index].storeName ? _list[index].storeName : "")
],
);
List<Widget> listWidget = List();
listWidget.clear();
listWidget.add(row);
listWidget.add(new Baseline(
baseline: 1,
baselineType: TextBaseline.alphabetic,
child: new Container(
color: Color(0xFFededed),
height: 1,
double.infinity,
),
));
List<Widget> listWidgetChild = List();
listWidgetChild.clear();
for (var b = 0; b < _list[index].goodsToBuyDtos.length; b++) {
var selected = _list[index].goodsToBuyDtos[b].selected;
listWidgetChild.add(new Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: new Slidable(
child: new Container(
child: new Row(
children: <Widget>[
new Checkbox(
value: selected,
activeColor: Color.fromARGB(255, 255, 67, 78),
onChanged: (bool) {
_list[index].goodsToBuyDtos[b].selected = !selected;
var count = 0;
_list[index].goodsToBuyDtos.forEach((fe) {
if (fe.selected) {
count++;
}
});
_list[index].selected =
count == _list[index].goodsToBuyDtos.length;
isSelect = _viewSelect();
_listMoneyCount();
setState(() {});
}),
new Image.network(
Api.getInstance().photo +
_list[index].goodsToBuyDtos[b].path,
fit: BoxFit.fill,
80,
height: 80,
),
Expanded(
child: new Padding(
padding: new EdgeInsets.only(left: 5, right: 5),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_list[index].goodsToBuyDtos[b].name,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
_list[index].goodsToBuyDtos[b].skuCfg,
softWrap: false,
overflow: TextOverflow.ellipsis,
),
Text(
"￥${_list[index].goodsToBuyDtos[b].price}",
style: TextStyle(color: Colors.red),
softWrap: false,
overflow: TextOverflow.ellipsis,
)
],
))
],
),
),
)
],
),
height: 85,
),
delegate: new SlidableDrawerDelegate(),
secondaryActions: <Widget>[
new IconSlideAction(
caption: '删除',
color: Colors.red,
icon: Icons.delete,
onTap: () => {},
),
]),
));
}
listWidget.add(new Column(
children: listWidgetChild,
));
return listWidget;
}
//计算金额
_listMoneyCount() {
money = 0.00;
selectCount = 0;
listItemCount = 0;
_list.forEach((f) {
f.goodsToBuyDtos.forEach((item) {
if (item.selected) {
var itemMoney = double.parse(item.price) * double.parse(item.count);
money = money + itemMoney;
selectCount++;
}
listItemCount++;
});
});
}
}
复制代码

ShopCartBean

import 'package:json_annotation/json_annotation.dart';
part 'ShopCartBean.g.dart';
@JsonSerializable()
class ShopCartBean {
@JsonKey(name: 'code')
String code;
@JsonKey(name: 'msg')
String msg;
@JsonKey(name: 'result')
List<ShopCartResult> result;
@JsonKey(name: 'success')
bool success;
ShopCartBean(this.code,this.msg,this.result,this.success,);
factory ShopCartBean.fromJson(Map<String, dynamic> srcJson) => _$ShopCartBeanFromJson(srcJson);
}
@JsonSerializable()
class ShopCartResult {
@JsonKey(name: 'couponShow')
bool couponShow;
@JsonKey(name: 'goodsIdStr')
String goodsIdStr;
@JsonKey(name: 'goodsToBuyDtos')
List<GoodsToBuyDtos> goodsToBuyDtos;
@JsonKey(name: 'selected')
bool selected;
@JsonKey(name: 'storeId')
String storeId;
@JsonKey(name: 'storeName')
String storeName;
ShopCartResult(this.couponShow,this.goodsIdStr,this.goodsToBuyDtos,this.selected,this.storeId,this.storeName,);
factory ShopCartResult.fromJson(Map<String, dynamic> srcJson) => _$ShopCartResultFromJson(srcJson);
}
@JsonSerializable()
class GoodsToBuyDtos {
@JsonKey(name: 'count')
String count;
@JsonKey(name: 'dValue')
String dValue;
@JsonKey(name: 'fee')
String fee;
@JsonKey(name: 'goodsId')
String goodsId;
@JsonKey(name: 'id')
String id;
@JsonKey(name: 'inventory')
String inventory;
@JsonKey(name: 'isGoodsNew')
bool isGoodsNew;
@JsonKey(name: 'limitDesc')
String limitDesc;
@JsonKey(name: 'maxBatch')
String maxBatch;
@JsonKey(name: 'memo')
String memo;
@JsonKey(name: 'minBatch')
String minBatch;
@JsonKey(name: 'name')
String name;
@JsonKey(name: 'path')
String path;
@JsonKey(name: 'price')
String price;
@JsonKey(name: 'selected')
bool selected;
@JsonKey(name: 'skuCfg')
String skuCfg;
@JsonKey(name: 'standardCfg')
String standardCfg;
@JsonKey(name: 'status')
String status;
@JsonKey(name: 'storeType')
String storeType;
GoodsToBuyDtos(this.count,this.dValue,this.fee,this.goodsId,this.id,this.inventory,this.isGoodsNew,this.limitDesc,this.maxBatch,this.memo,this.minBatch,this.name,this.path,this.price,this.selected,this.skuCfg,this.standardCfg,this.status,this.storeType,);
factory GoodsToBuyDtos.fromJson(Map<String, dynamic> srcJson) => _$GoodsToBuyDtosFromJson(srcJson);
}
复制代码

本人刚刚坑，代码没有进行拆分等优化只是做了页面效果以及选中和未选中等逻辑操作（删除逻辑暂时没有写）