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))

            ),

         

        )

        )

       

       

      ),

      )

     

    );

  }

}

上一篇:Flutter实现动态化更新-技术预研


下一篇:Flutter学习-dart(5):dart函数