Flutter-防京东商城项目-购物车-24

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

代码文档

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

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

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

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

效果：

1.添加下面的代码

Counter(){
  this._count = 10;
}

2.增加三个文件

第三方自定义文件

import 'package:flutter/material.dart';

class Cart with ChangeNotifier{

  List _cartList=[];  //状态
  // int _cartNum=0;

  int get cartNum=>this._cartList.length;
  List get cartList=>this._cartList;

  addData(value){
    this._cartList.add(value);
    notifyListeners();
  }

  deleteData(value){
    this._cartList.remove(value);
    notifyListeners();
  }

}

3.控件

创建两个购物车的自定义控件
1.CartItem是购物车的cell
2.CartNum用于购物车底部计算总量的cell

CartItem代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../provider/Cart.dart';

class CartItem extends StatefulWidget {
  CartItem({Key key}) : super(key: key);

  _CartItemState createState() => _CartItemState();
}

class _CartItemState extends State<CartItem> {
  @override
  Widget build(BuildContext context) {
    var cartProvider = Provider.of<Cart>(context);
    return cartProvider.cartList.length>0?Column(
      children: cartProvider.cartList.map((value){
        return ListTile(
          title: Text("${value}"),
          trailing: InkWell(
            onTap: (){
               //删除
                cartProvider.deleteData(value);
            },
            child: Icon(Icons.delete),
          ),
        );
      }).toList(),
    ):Text("");
  }
}

CartNum

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../provider/Cart.dart';
class CartNum extends StatefulWidget {
  CartNum({Key key}) : super(key: key);

  _CartNumState createState() => _CartNumState();
}

class _CartNumState extends State<CartNum> {
  @override
  Widget build(BuildContext context) {
    var cartProvider = Provider.of<Cart>(context);
    return Column(
      children: <Widget>[
        Text("${cartProvider.cartNum}")
      ],
    );
  }
}

4. 回到main页面 初始化Cart

import 'package:flutter_app/provider/Cart.dart';

return MultiProvider(
  providers: [
    ChangeNotifierProvider(builder: (_) => Counter()),
    ChangeNotifierProvider(builder: (_) => Cart())
  ],

5.回到购物车页面 CartPage

导入头文件

import 'package:flutter_app/provider/Cart.dart';//全局属性定义文件
import 'package:flutter_app/pages/Cart/CartItem.dart';
import 'package:flutter_app/pages/Cart/CartNum.dart';

覆盖下面的代码

class CartPage extends StatefulWidget {

  CartPage({Key key}) : super(key: key);

  _CartPageState createState() => _CartPageState();

}

class _CartPageState extends State<CartPage> {
  @override
  void initState() {
    super.initState();
    print("cart");
  }

  @override
  Widget build(BuildContext context) {

    var counterProvider = Provider.of<Counter>(context);

    var cartProvider = Provider.of<Cart>(context);

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          counterProvider.incCount();
          //给购物车列表增加数据
          cartProvider.addData('哈哈${counterProvider.count}');
        },
        child: Icon(Icons.add),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: Text("统计数量：${counterProvider.count}",style: TextStyle(
                fontSize: 20
            )),
          ),
          Divider(),

          //加载购物车列表的子组件
          CartItem(),
          Divider(height: 40),
          CartNum()
        ],
      ),
    );
  }

}