一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
效果:
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()
],
),
);
}
}