Flutter移动电商实战 --（51）购物车_Provide中添加商品

灰太狼 2023-06-01 06:06 28阅读 0赞

# 新加provide的cart.dart页面 #

引入三个文件。开始写provide类。provide需要用with 进行混入

![1090399-20190922230900848-993716386.png][]

从prefs里面获取到数据，判断有没有数据，如果有数据就返转正List<Map>

![1090399-20190922230943968-1645560524.png][]

判断是否有重复的记录，如果有重复记录就数量+1，如果数据不存在就加入到tempList数组中，最后把tempList数据转成字符串，进行持久化

![1090399-20190922231006673-1806016344.png][]

# 清空购物车的方法 #

清空的方法比较简单，注意这里是异步的

![1090399-20190922231038926-508860083.png][]

给两个方法最后都加上通知

![1090399-20190922231102542-1787240316.png][]

# provide的全局依赖 #

在main.dart中

![1090399-20190922231134633-789379653.png][]

# details\_bottom.dart中 #

引入，

因为要获取商品的信息，所以要引入：details\_info.dart

![1090399-20190922231211561-191410020.png][]

import 'package:provide/provide.dart';
    import '../../provide/cart.dart';
    import '../../provide/details_info.dart';

从provide中获取到当前商品的详情，就可以获取到商品的编号 名称 价格和图片的地址了。

![1090399-20190922231256515-2103068512.png][]

加入购物车和清空购物车的点击事件内，调用provide内的save和remove的方法

![1090399-20190922231323583-1060576654.png][]

# 纠正错误： #

![1090399-20190922231353864-2095480982.png][]

# 效果展示： #

添加重复的数量在增加

![1090399-20190922231430461-1866746413.png][]

立即购买是清空的效果

![1090399-20190922231502472-329618960.png][]

# 最终代码 #

provide/cart.dart

import 'package:flutter/material.dart';
    import 'package:shared_preferences/shared_preferences.dart';
    import 'dart:convert';
    
    class CartProvide with ChangeNotifier{
      String cartString="[]";//声明一个变量 做持久化的存储
    
      //声明一个异步的方法,购物车操作放在前台不在请求后台的数据
      save(goodsId,goodsName,count,price,images) async {
        SharedPreferences prefs = await SharedPreferences.getInstance();
        cartString= prefs.getString('cartInfo');//先从持久化中获取
        var temp = cartString==null?[]:json.decode(cartString.toString());
        //声明list 强制类型是Map
        List<Map> tempList=(temp as List).cast();//把temp转成list
        bool isHave=false;//是否已经存在了这条记录
        int ival=0;//foreach循环的索引
        //循环判断列表是否存在该goodsId的商品，如果有就数量+1
        tempList.forEach((item){
          if(item['goodsId']==goodsId){
            tempList[ival]['count']=item['count']+1;
            isHave=true;
          }
          ival++;
        });
        //没有不存在这个商品，就把商品的json数据加入的tempList中
        if(!isHave){
          tempList.add({
            'goodsId':goodsId,//传入进来的值
            'goodsNmae':goodsName,
            'count':count,
            'price':price,
            'images':images
          });
        }
        cartString=json.encode(tempList).toString();//json数据转字符串
        print(cartString);
        prefs.setString('cartInfo', cartString);
        notifyListeners();
      }
      remove() async{
        SharedPreferences prefs=await SharedPreferences.getInstance();
        prefs.remove('cartInfo');
        print('清空完成----------------------');
        notifyListeners();
      }
    }

main.dart

import 'package:flutter/material.dart';
    import './pages/index_page.dart';
    import 'package:provide/provide.dart';
    import './provide/counter.dart';
    import './provide/child_category.dart';
    import './provide/category_goods_list.dart';
    import './provide/details_info.dart';
    import './provide/cart.dart';
    import 'package:fluro/fluro.dart';
    import './routers/routers.dart';
    import './routers/application.dart';
    
    
    void main(){
     var counter=Counter();
     var childCategory=ChildCategory();
     var categoryGoodsListProvide=CategoryGoodsListProvide();
     var detailsInfoProvide=DetailsInfoProvide();
     var cartProvide=CartProvide();
     var providers=Providers();
     //final router=Router();//Router就是我们的Fluro
     //注册 依赖
     providers
     ..provide(Provider<Counter>.value(counter))
     ..provide(Provider<CategoryGoodsListProvide>.value(categoryGoodsListProvide))
     ..provide(Provider<DetailsInfoProvide>.value(detailsInfoProvide))
     ..provide(Provider<CartProvide>.value(cartProvide))
     ..provide(Provider<ChildCategory>.value(childCategory)); 
      runApp(ProviderNode(child: MyApp(),providers: providers,));
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        final router=Router();//Router就是我们的Fluro
        Routes.configurreRoutes(router);//注册router
        Application.router=router;//静态化
    
        return Container(
          child:MaterialApp(
            title:'百姓生活+',
            onGenerateRoute: Application.router.generator,
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.pink
            ),
            home: IndexPage(),
          )
        );
      }
    }

details\_bottom.dart

import 'package:flutter/material.dart';
    import 'package:flutter_screenutil/flutter_screenutil.dart';
    import 'package:provide/provide.dart';
    import '../../provide/cart.dart';
    import '../../provide/details_info.dart';
    
    class DetailsBottom extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//当前商品的详情
        var goodsId=goodsInfo.goodsId;
        var goodsName=goodsInfo.goodsName;
        var count=1;//默认为1
        var price=goodsInfo.presentPrice;
        var images=goodsInfo.image1;
    
    
        return Container(
          width: ScreenUtil().setWidth(750),
          color: Colors.white,
          height: ScreenUtil().setHeight(80),
          child: Row(
            children: <Widget>[
              InkWell(
                onTap: (){},
                child: Container(
                  width: ScreenUtil().setWidth(110),
                  alignment: Alignment.center,
                  child: Icon(
                    Icons.shopping_cart,
                    size:35,//图标没有自适应 要是设置size的大小
                    color: Colors.red,
                  ),
                ),            
              ),
              InkWell(
                onTap: () async{
                  await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
                },
                child: Container(
                  alignment: Alignment.center,
                  width: ScreenUtil().setWidth(320),//750 - 110 再除以2 评分
                  height: ScreenUtil().setHeight(80),
                  color: Colors.green,
                  child: Text(
                    '加入购物车',
                    style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
                  ),
                ),
              ),
              InkWell(
                onTap: () async{
                  await Provide.value<CartProvide>(context).remove();
                },
                child: Container(
                  alignment: Alignment.center,
                  width: ScreenUtil().setWidth(320),//750 - 110 再除以2 评分
                  height: ScreenUtil().setHeight(80),
                  color: Colors.red,
                  child: Text(
                    '立即购买',
                    style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp(28)),
                  ),
                ),
              )
            ],
          ),
        );
      }
    }

转载于:https://www.cnblogs.com/crazycode2/p/11553279.html

[1090399-20190922230900848-993716386.png]: /images/20230601/86b370ead47a481cacca820901503bb5.png
[1090399-20190922230943968-1645560524.png]: /images/20230601/992f0008cea148d3990cc92d3e5fd1a0.png
[1090399-20190922231006673-1806016344.png]: /images/20230601/f1d10c3379bd46e29c22d9f468502ce2.png
[1090399-20190922231038926-508860083.png]: /images/20230601/43441576757645d492aff45fde250da0.png
[1090399-20190922231102542-1787240316.png]: /images/20230601/5752817b779e4d9492ccec471d103e5a.png
[1090399-20190922231134633-789379653.png]: /images/20230601/ac798504548447d7b26fce0b1dbc549f.png
[1090399-20190922231211561-191410020.png]: /images/20230601/73b2370bf41040049e6c34ee2a6ca347.png
[1090399-20190922231256515-2103068512.png]: /images/20230601/2041d0ce9d2b4f69a046262e2021821c.png
[1090399-20190922231323583-1060576654.png]: /images/20230601/143f0306525d43f5964c3ba0751538a7.png
[1090399-20190922231353864-2095480982.png]: /images/20230601/fd52745ca36e4cadb6661c936aae7fcd.png
[1090399-20190922231430461-1866746413.png]: /images/20230601/f969c8615beb40fdb0e998bf83f0ba6e.png
[1090399-20190922231502472-329618960.png]: /images/20230601/3e19cc8fd8764f9e88e941945719aa63.png