flutter购物车
作者：互联网
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/widget/custom_check.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
class ImproShop extends StatefulWidget {
ImproShop({Key key}) : super(key: key);
@override
_ImproShopState createState() => _ImproShopState();
}
class _ImproShopState extends State<ImproShop> {
//是否管理
bool isManger = true;
bool value = false;
List list = [
{
"id": 1,
"title": "珍珠白，美白就用珍珠白",
"subTitle": "有你白的更闪耀",
"moeny": "99",
"number": "1",
"value": false,
},
{
"id": 2,
"title": "珍珠白，美白就用珍珠白",
"subTitle": "有你白的更闪耀",
"moeny": "88",
"number": "1",
"value": false,
},
{
"id": 3,
"title": "珍珠白，美白就fndsjjkfdjkfbfhfghfghdsgfdhdfhfghjdgfjd用珍珠白",
"subTitle": "有你白的更闪耀",
"moeny": "200",
"number": "1",
"value": false,
},
{
"id": 4,
"title": "珍珠白，美白就用珍珠白",
"subTitle": "有你白的更闪耀",
"moeny": "188",
"number": "1",
"value": false,
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("购物车"),
actions: [
InkWell(
onTap:(){
setState(() {
this.isManger = !this.isManger;
});
},
child: Center(
child:Padding(padding: EdgeInsets.only(right: 10),
child: Text(isManger?"管理":"恢复"),),
),
)
],
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: 50,
decoration:const BoxDecoration(
border:Border(
top:BorderSide(
color: Colors.grey,
width: 0.5
)
)
),
child: Padding(padding: EdgeInsets.only(
left: 20,right: 20,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
CustomCheck((){
setState(() {
this.value = !this.value;
});
_checkAll(this.value);
}, this.value),
Padding(padding: EdgeInsets.only(left: 10),
child: Text("全选"),),
],
),
isManger?Text("共：￥${getTotal()}",style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
color: Colors.pink
),):InkWell(
onTap: (){
_deleteItems();
},
child:Container(
padding: EdgeInsets.only(top:5,bottom: 5,left: 10,right: 10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.pink[200],
width: 0.5
),
borderRadius: BorderRadius.all(Radius.circular(10))
),
child: Text("删除",style: TextStyle(
color: Colors.pink
),),
),
)
],
),
),
),),
body: ListView(
children: _item(),
),
);
}
List<Widget> _item() {
List<Widget> arr = [];
// arr.add(Text("我是循环的"));
Widget item;
for (var index = 0; index < list.length; index++) {
item = Slidable(
key:ValueKey(index) ,
//右滑
endActionPane:ActionPane(
motion:ScrollMotion(),
children:[
SlidableAction(
onPressed:(value){
_removeItem(list[index]);
},
icon: Icons.delete,
label:"删除",
backgroundColor: Colors.orange,
)
]
) ,
child: Container(
width: double.infinity,
// height: 100,
padding: EdgeInsets.all(10.0),
child: Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
child: CustomCheck(() {
setState(() {
list[index]["value"] = !list[index]["value"];
});
getTotal();
// print("打印数组list${list}");
}, list[index]["value"]),
),
Container(
padding: EdgeInsets.only(left: 5),
height: 64,
width: 64,
child: Image.network(
"https://img1.baidu.com/it/u=1849701997,2238263017&fm=26&fmt=auto",
fit: BoxFit.cover,
),
),
_rightItem(list[index], index),
],
),
),
);
arr.add(item);
}
return arr;
}
//右边
_rightItem(Map e, int index) {
return Expanded(
child: Padding(
padding: EdgeInsets.only(left: 10,right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
child: Text(
e["title"],
style: TextStyle(
overflow: TextOverflow.ellipsis,
fontWeight: FontWeight.bold,
fontSize: 14),
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
e["subTitle"],
style:
TextStyle(fontSize: 10.0, fontWeight: FontWeight.w400),
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(e["moeny"]),
_numInput(e,index),
],
),
)
],
)
)
);
}
//购物车数量加减
_numInput(Map e,int index) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(onPressed: (){
if(int.parse(e["number"])>1){
int number = int.parse(e["number"]);
number--;
// print("打印减了之后得${number}");
setState(() {
list[index]["number"] = number.toString();
});
getTotal();
}
},
icon: Icon(Icons.remove,size: 12.0,),
),
Padding(padding: EdgeInsets.only(left: 5,right: 5),
child: Text(e["number"]),),
IconButton(onPressed: (){
int addNumber = int.parse(e["number"]);
addNumber++;
setState(() {
list[index]["number"] = addNumber.toString();
});
getTotal();
}, icon: Icon(Icons.add,size: 12.0,))
],
);
}
//获取价格
String getTotal(){
var arr ;
double total = 0;
arr = list.where((e){
return e["value"] == true;
});
print("新组成得数组是${arr}");
if(arr.toList().length == list.length){
setState(() {
this.value = true;
});
}
else{
setState(() {
this.value = false;
});
}
arr.toList().forEach((e) {
total = total + double.parse(e["moeny"])*double.parse(e["number"]);
});
return total.toString();
}
//全选
void _checkAll(bool value) {
var newArr;
if(this.value){
newArr = list.map((e){
return {...e,"value":true};
});
}
else{
newArr = list.map((e){
return {...e,"value":false};
} );
}
setState(() {
this.list = newArr.toList();
});
print("全选之后得数组${list}");
}
//删除某一项
void _removeItem(e) {
list.remove(e);
setState(() {
this.list = list;
});
}
//删除选中的
void _deleteItems() {
var deleArr;
deleArr =list.where((e){
return e["value"] == false;
});
setState(() {
list = deleArr.toList();
});
}
}
//自定义多选框
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomCheck extends StatefulWidget {
final VoidCallback checkTap;
final bool isChecked ;
const CustomCheck( this.checkTap, this.isChecked,{Key key}) : super(key: key);
@override
_CustomCheckState createState() => _CustomCheckState();
}
class _CustomCheckState extends State<CustomCheck> {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: widget.checkTap,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
height: 20,
width: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
border: Border.all(
color: Colors.grey,
width: 1.0
),
),
child:
Padding(padding: EdgeInsets.all(4),
child: Container(
decoration: BoxDecoration(
color:widget.isChecked?Colors.blue:Colors.white,
borderRadius: BorderRadius.all(Radius.circular(6))
),
)
)
),
)
);
}
}
标签：index,list,number,value,购物车,child,EdgeInsets,flutter 来源： https://blog.csdn.net/weixin_40570474/article/details/121684963