Flutter-防京东商城项目-渲染结算页面商品数据-38

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

效果图

1.回到页面里面添加一个方法

//获取购物车选中的数据
static getCheckOutData() async {
  List cartListData = [];
  List tempCheckOutData = [];
  try {
    cartListData = json.decode(await Storage.getString('cartList'));
  } catch (e) {
    cartListData = [];
  }
  for (var i = 0; i < cartListData.length; i++) {
    if (cartListData[i]["checked"] == true) {
      tempCheckOutData.add(cartListData[i]);
    }
  }

  return tempCheckOutData;
}

2.把这个文件拖进来

import 'package:flutter/material.dart';

class CheckOut with ChangeNotifier {
  List _checkOutListData = []; //购物车数据
  List get checkOutListData => this._checkOutListData;

  changeCheckOutListData(data){
    this._checkOutListData=data;
    notifyListeners();
  }

}

3.回到进来配置

import 'provider/CheckOut.dart';
var checkOutProvider;//应该不用写
ChangeNotifierProvider(builder: (_) => CheckOut())

4.回到页面
4.1导入

import '../../provider/CheckOut.dart';
import 'package:fluttertoast/fluttertoast.dart';
import '../../services/UserServices.dart';
import '../../services/CartServices.dart';

4.2添加方法

//去结算
doCheckOut() async {
  //1、获取购物车选中的数据
  List checkOutData = await CartServices.getCheckOutData();  
  //2、保存购物车选中的数据
  this.checkOutProvider.changeCheckOutListData(checkOutData);
  //3、购物车有没有选中的数据
  if (checkOutData.length > 0) {
    //4、判断用户有没有登录
    var loginState = await UserServices.getUserLoginState();
    if (loginState) {
      Navigator.pushNamed(context, '/checkOut');
    } else {
      Fluttertoast.showToast(
        msg: '您还没有登录，请登录以后再去结算',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
      Navigator.pushNamed(context, '/login');
    }
  } else {
    Fluttertoast.showToast(
      msg: '购物车没有选中的数据',
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
    );
  }
}

调用结算方法：

doCheckOut

添加下面的代码

this.checkOutProvider = Provider.of<CheckOut>(context);

5.回到页结算页面

import 'package:provider/provider.dart';
import '../provider/CheckOut.dart';

var checkOutProvider = Provider.of<CheckOut>(context);

替换下面代码
旧代码

新代码

child: Column(
  children: checkOutProvider.checkOutListData.map((value){
      return Column(
        children: <Widget>[
           _checkOutItem(value),
            Divider()
        ],
      );
  }).toList()
),

回到上面_checkOutItem 方法
替换一下红色的内容

Widget _checkOutItem(item) {
  return Row(
    children: <Widget>[
      Container(
        width: ScreenAdapter.width(160),
        child: Image.network(
            "${item["pic"]}",//--------------------------------------------
            fit: BoxFit.cover),
      ),
      Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.fromLTRB(10, 10, 10, 5),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("${item["title"]}", maxLines: 2),//--------------------------------
                Text("${item["selectedAttr"]}", maxLines: 2),//-------------------------
                Stack(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.centerLeft,
                      child:
                          Text(
                          "￥${item["price"]}", //---------------------------------------
                          style: TextStyle(color: Colors.red)),
                    ),
                    Align(
                      alignment: Alignment.centerRight,
                      child: Text("x${item["count"]}"),//-------------------------------
                    )
                  ],
                )
              ],
            ),
          ))
    ],
  );
}

7.增加下面的代码

child: Container(
  padding: EdgeInsets.all(5),//--------------------------------------------
  width: ScreenAdaper.width(750),
  height: ScreenAdaper.height(100),