Flutter实现购物车功能（代码+逻辑）⽬录⼀、初始化时判断是否为登录状态⼆、分析点击全选和⾮全选状态三、改变单个物品check四、点击数量增加和减少按钮改变当前显⽰number值五、长按删除数据⼀、初始化时判断是否为登录状态假设是登录状态从本地中取出token，带参传递给后端请求登录后购物车数据⼆、分析点击全选和⾮全选状态1.全选状态就是把数组中的数据对应的每个check值设置为true，总价就是后端返回的全选数量的总价格设置全选和⾮全选这个的改变是由初始化查询数组列表中是否为全选或⾮全选状态所决定，如果遇见⼀个check为false那么就返回false 2.⾮全选状态(总价结果为0或者当前选中对象的总价之和)判断是否⾮全选状态三、改变单个物品check触发checkCart接⼝进⾏更新全选状态的总价，以及当前选中商品总价触发update接⼝等更新数量，触发查询接⼝更改选中商品总价，以及全选总价⾃定义的数量组件返回的value是当前增加或减少改变后的number值调⽤删除接⼝重新渲染页⾯import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:myshop_flutter/components/gradient_button.dart';import 'package:myshop_flutter/config/colours.dart';import 'package:myshop_flutter/config/index.dart';import 'package:myshop_flutter/event/cart_number_event.dart';import 'package:myshop_flutter/event/category_event.dart';import 'package:myshop_flutter/event/login_event.dart';import 'package:myshop_flutter/event/refresh_event.dart';import 'package:myshop_flutter/model/cart_list_model.dart';import 'package:myshop_flutter/page/CategoryPage/GoodCategory/GooddetailWidget/cart_number_widget.dart'; import 'package:myshop_flutter/service/cart_service.dart';import 'package:myshop_flutter/utils/navigator_util.dart';import 'package:myshop_flutter/utils/shared_preferences_util.dart';import 'package:myshop_flutter/utils/toast_util.dart';import 'package:myshop_flutter/widgets/cached_image_widget.dart';import 'package:shared_preferences/shared_preferences.dart';class CartPage extends StatefulWidget {const CartPage({Key key}) : super(key: key);@override_CartPageState createState() => _CartPageState();}class _CartPageState extends State<CartPage> {//购物车数据服务CartService _cartService = CartService();//购物车列表数据List<CartModel> _cartList;//购物车列表数据模型CartListModel _cartListModel;//是否登录bool _isLogin = false;//是否全选bool _isAllCheck = false;//是否全都不选bool _isAllNotCheck = false;//总计double _totalMoney;//tokenvar token;//获取当前查询购物车中选中的商品数量var _checkedGoodsAmount;@overridevoid initState() {super.initState();//从缓存中取出当前登录状态SharedPreferencesUtil.getLoginSave().then((v){print("登录购物车页⾯获取本地登录值${v}");if(v){setState(() {_isLogin = v;});//刷新购物车数据//从缓存中取出当前的token值SharedPreferencesUtil.getToken().then((onValue) {if(onValue!=null){_getCartData(onValue);setState(() {token = onValue;});}});}});}_listener(){//初始化的时候监听是否登录loginEventBus.on<LoginEvent>().listen((LoginEvent loginEvent) {print("购物车页⾯是否判定登录");setState(() {_isLogin = loginEvent.isLogin;});});}//获取购物车数据_getCartData(token) {print("---------${token}");//将token值放⼊请求头⾥Options options = Options(headers:{"X-Shop-Token" : token});//查询购物车数据_cartService.queryCart((cartList) {setState(() {_cartListModel = cartList;_cartList = _cartListModel.cartList;_checkedGoodsAmount = _cartListModel.cartTotal.checkedGoodsAmount; _totalMoney = _cartListModel.cartTotal.goodsAmount;});//是否全选_isAllCheck = _isCheckedAll();_isAllNotCheck = _isNotCheckedAll();}, (error) {ToastUtil.showToast(error);},options:options);}//判断是否全部不选，如果有⼀个等于true就返回false_isNotCheckedAll(){//迭代循环购物车列表所有checked属性,当全部为true时为全选状态for (int i = 0; i < _cartList.length; i++) {if (_cartList[i].checked == null || _cartList[i].checked ) {return false;}}return true;}// //判断是否全选bool _isCheckedAll() {//迭代循环购物车列表所有checked属性,当全部为true时为全选状态for (int i = 0; i < _cartList.length; i++) {if (_cartList[i].checked == null || !_cartList[i].checked) {return false;}}return true;}//监听刷新事件,当⽤户从商品详情页⾯点击添加⾄购物车时会触发刷新事件_refreshEvent() {//重新调⽤接⼝赋值CarteventBus.on<RefreshEvent>().listen((RefreshEvent refreshEvent){if(refreshEvent.isRefresh){_getCartData(token);}});CarteventBus.fire(RefreshEvent(false));}@overrideWidget build(BuildContext context) {//监听刷新事件_listener();_refreshEvent();return _isLogin == trueScaffold(appBar: AppBar(centerTitle: true,title: Text("购物车"),),body: _cartList.length == 0?Container(padding: EdgeInsets.only(top: 70),child: Center(child: Column(children: [Image.asset("images/emptycar.png",width: 135,height: 135,),SizedBox(height: 46,),Text("还没有添加任何商品，快去选购吧！",style: TextStyle(fontSize: 15, color: Colours.textBlack32), ),SizedBox(height: 80,),GestureDetector(onTap: () {// Navigator.pop(context);},child: Container(alignment: Alignment.center,width: 100,height: 40,decoration: BoxDecoration(gradient: LinearGradient(colors: [Colours.directBB1,Colours.directBB2,],end: Alignment.bottomCenter,begin: Alignment.topCenter,),borderRadius: BorderRadius.circular(150), ),child: Text("去逛逛",style: TextStyle(color: Colors.white, fontSize: 16),),),),],),),): Stack(alignment: Alignment.bottomCenter,children: <Widget>[//购物车列表项个数itemCount: _cartList.length,//购物车列表项构建器itemBuilder: (BuildContext context, int index) {//根据索引返回列表项return _getCartItemWidget(index);}),Container(height: 60,decoration:BoxDecoration(color: Colors.white,),//⽔平布局child: Row(crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Expanded(flex: 3,child: Row(children: [//全选复选框Checkbox(value: _isAllCheck,activeColor: KColor.defaultCheckBoxColor,//选择改变事件回调onChanged: (bool) {//设置是否全选_setCheckedAll(bool);}),Text("全选"),Expanded(child: Container(alignment: Alignment.centerRight,margin: EdgeInsets.only(right: 20),//全选价格child: Text(_isAllCheckKString.TOTAL_MONEY +"${_totalMoney}": _isNotCheckedAll == true ? KString.TOTAL_MONEY +"0.0":KString.TOTAL_MONEY + "${_checkedGoodsAmount}"), )),],)),Expanded(flex: 1,child: Container(margin: EdgeInsets.only(right:30,),alignment: Alignment.centerRight,//结算按钮child: RaisedButton(//结算操作onPressed: () {//跳转到填写订单页⾯_fillInOrder();},color: KColor.defaultButtonColor,child: Text(//结算标签KString.SETTLEMENT,style: TextStyle(color: Colors.white,fontSize:17),),),),),],),)],)): Scaffold(appBar: AppBar("购物车",style: TextStyle(color: Colors.white),),backgroundColor: Colors.lightBlueAccent,),body: Container(child: Column(children: [SizedBox(height: 40,),Container(alignment: Alignment.center,child: Image.asset("images/wukong.png",height: 60,width: double.infinity,),),Center(child: Text("还没有登录哦"),),GestureDetector(onTap: () {},child: Padding(padding: EdgeInsets.fromLTRB(30, 10, 30, 0),child:GradientButton("去登录", 0xFFFF9E00, 0xFFFF4800, () { NavigatorUtil.goLogin(context);}, textSize: 18, textColor: 0xFFFEFEFE),))],),),);}//跳转⾄填写订单页⾯_fillInOrder() {NavigatorUtil.goFillInOrder(context, 0);}//设置是否全选/全不选_setCheckedAll(bool checked) {setState(() {_isAllCheck = checked;for (int i = 0; i < _cartList.length; i++) {_cartList[i].checked = checked;}});}//删除对话框_deleteDialog(int index) {return showDialog<void>(context: context,barrierDismissible: true,builder: (BuildContext context) {return AlertDialog(//提⽰title: Text(KString.TIPS),//是否确认删除content: Text(KString.DELETE_CART_ITEM_TIPS),actions: <Widget>[//取消按钮FlatButton(onPressed: () {Navigator.pop(context);},child: Text(KString.CANCEL,style: TextStyle(color: Colors.black54),),),//删除按钮_deleteGoods(index);},child: Text(KString.CONFIRM,style: TextStyle(color: KColor.defaultTextColor),),)],);});}//根据索引删除购物车商品_deleteGoods(int index) {//获取token值Options options = Options(headers:{"X-Shop-Token" : token}); //通过索引获取到产品Idvar parameters = {"productIds": [_cartList[index].productId]};//调⽤删除商品⽅法_cartService.deleteCart((success) {//删除成功提⽰ToastUtil.showToast(KString.DELETE_SUCCESS);setState(() {//本地列表移除数据_cartList.removeAt(index);});Navigator.pop(context);}, (error) {ToastUtil.showToast(error);}, parameters,options:options);}//根据索引获取购物车项组件Widget _getCartItemWidget(int index) {return Container(height:130,width: double.infinity,child: InkWell(//长按打开删除商品对话框onLongPress: () => _deleteDialog(index),child: Card(//⽔平布局child: Row(crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[//是否勾选此商品Checkbox(//读取购物车列表数据中当前项的checked值value: _cartList[index].checked ?? true,activeColor: KColor.defaultCheckBoxColor,//改变回调⽅法onChanged: (bool) {_checkCart(index, bool);}),//缓存商品图⽚CachedImageWidget(80,80,//商品图⽚路径_cartList[index].picUrl,),//垂直布局SizedBox(width: 30,),Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[//商品名称Text(_cartList[index].goodsName,style: TextStyle(fontSize:16,color: Colors.black54),padding: EdgeInsets.only(top: 10,),),//商品价格Text("¥${_cartList[index].price}",style: TextStyle(fontSize: 16,color: Colors.grey),)],),Expanded(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[//购买商品数量Text("X${_cartList[index].number}",style: TextStyle(color: Colors.black54,fontSize: 16),),Padding(padding: EdgeInsets.only(top:10,),),//使⽤购物数量组件CartNumberWidget(_cartList[index].number, (value) {//根据返回的索引及数量更新购物车_updateCart(index, value);}),],))],),),),);}//是否勾选商品,传⼊索引及是否勾选_checkCart(int index, bool isCheck) {Options options = Options(headers:{"X-Shop-Token" : token});var parameters = {//产品Id"productIds": [_cartList[index].productId],//是否选择"isChecked": isCheck ? 1 : 0,};//调⽤购物车数据服务⽅法_cartService.cartCheck((success) {setState(() {_cartListModel = success;_cartList = _cartListModel.cartList;//重新设置全选状态_isAllCheck = _isCheckedAll();//计算总价_checkedGoodsAmount = _cartListModel.cartTotal.checkedGoodsAmount; _totalMoney = _cartListModel.cartTotal.goodsAmount;});}, (error) {ToastUtil.showToast(error);}, parameters,options);}//更新购物车,传⼊索引及数量_updateCart(int index, int number) {Options options = Options(headers:{"X-Shop-Token" : token});var parameters = {//规格Id"productId": _cartList[index].productId,//商品数量"number": number,//id"id": _cartList[index].id,};_cartService.updateCart((success) {setState(() {_cartList[index].number = number;});_getCartData(token);}, (error) {ToastUtil.showToast(error);cartNumberEventBus.fire(CartNumberEvent(number - 1));}, options, parameters);}}到此这篇关于Flutter实现购物车功能(代码+逻辑)的⽂章就介绍到这了,更多相关Flutter 购物车内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
