Flutter實戰視頻-移動電商-56.購物車_商品數量控制區域製做

56.購物車_商品數量控制區域製做

主要作購物車中的數量這裏

 

cart_page文件夾下新建cart_count.dart

 

減小按鈕

由於會有點擊事件，因此這裏咱們使用InkWell。

child裏面外層套一個Container，爲何要外層始終套一個Container呢，由於咱們能夠設置內邊距、外邊距、寬和高等等

 

  //減小按鈕
  Widget _reduceBtn(){
    return InkWell(
      onTap: (){},
      child: Container(
          width: ScreenUtil().setWidth(45),//是正方形的因此寬和高都是45
          height: ScreenUtil().setHeight(45),
          alignment: Alignment.center,//上下左右都居中
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(//外層已經有邊框了因此這裏只設置右邊的邊框
              right:BorderSide(width: 1.0,color: Colors.black12)
            )
          ),
          child: Text('-'),
      ),
    );
  }

 

 

加號按鈕

和減號按鈕幾乎同樣直接複製減號的方法過來改一下

 

中間數字區域

//中間數量顯示區域
  Widget _countArea(){
    return Container(
       width: ScreenUtil().setWidth(70),//爬兩個數字的這裏顯示不下就寬一點70
       height: ScreenUtil().setHeight(45),//高度和加減號保持同樣的高度
       alignment: Alignment.center,//上下左右居中
       color: Colors.white,//北京顏色 設置爲白色
       child: Text('1'),//先默認設置爲1 由於後續是動態的獲取數字
    );
  }

}

 

 

組合組件

加入主頁的UI裏面cart_item.dart裏面

 

先引入：import './cart_count.dart';

在商品名稱的下面，使用CartCount（）

 

頁面展現

 

 

最終代碼

cart_count.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class CartCount extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: ScreenUtil().setWidth(165),
      margin: EdgeInsets.only(top:5.0),
      decoration: BoxDecoration(
        border: Border.all(width: 1,color: Colors.black12)//設置全部的邊框寬度爲1 顏色爲淺灰
      ),
      child: Row(
        children: <Widget>[
          _reduceBtn(),
          _countArea(),
          _addBtn()
        ],
      ),
    );
  }
  //減小按鈕
  Widget _reduceBtn(){
    return InkWell(
      onTap: (){},
      child: Container(
          width: ScreenUtil().setWidth(45),//是正方形的因此寬和高都是45
          height: ScreenUtil().setHeight(45),
          alignment: Alignment.center,//上下左右都居中
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(//外層已經有邊框了因此這裏只設置右邊的邊框
              right:BorderSide(width: 1.0,color: Colors.black12)
            )
          ),
          child: Text('-'),
      ),
    );
  }
  //加號
  Widget _addBtn(){
    return InkWell(
      onTap: (){},
      child: Container(
          width: ScreenUtil().setWidth(45),//是正方形的因此寬和高都是45
          height: ScreenUtil().setHeight(45),
          alignment: Alignment.center,//上下左右都居中
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border(//外層已經有邊框了因此這裏只設置右邊的邊框
              left:BorderSide(width: 1.0,color: Colors.black12)
            )
          ),
          child: Text('+'),
      ),
    );
  }

  //中間數量顯示區域
  Widget _countArea(){
    return Container(
       width: ScreenUtil().setWidth(70),//爬兩個數字的這裏顯示不下就寬一點70
       height: ScreenUtil().setHeight(45),//高度和加減號保持同樣的高度
       alignment: Alignment.center,//上下左右居中
       color: Colors.white,//北京顏色 設置爲白色
       child: Text('1'),//先默認設置爲1 由於後續是動態的獲取數字
    );
  }

}

View Code

 

cart_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/cartInfo.dart';
import './cart_count.dart';

class CartItem extends StatelessWidget {
  final CartInfoModel item;
  CartItem(this.item);


  @override
  Widget build(BuildContext context) {
    print(item);
    return Container(
      margin: EdgeInsets.fromLTRB(5.0, 2.0, 5.0, 2.0),
      padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 10.0),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
          bottom: BorderSide(width: 1,color: Colors.black12)
        )
      ),
      child: Row(
        children: <Widget>[
          _cartCheckBt(),
          _cartImage(),
          _cartGoodsName(),
          _cartPrice()
        ],
      ),
    );
  }
  //複選框
  Widget _cartCheckBt(){
    return Container(
      child: Checkbox(
        value: true,
        activeColor: Colors.pink,//激活顏色設置爲粉色
        onChanged:(bool val){

        }
      ),
    );
  }
  //商品圖片
  Widget _cartImage(){
    return Container(
      width: ScreenUtil().setWidth(150),
      padding: EdgeInsets.all(3.0),//內邊距
      decoration: BoxDecoration(
        border: Border.all(width:1.0,color: Colors.black12)
      ),
      child: Image.network(item.images),//item聲明好了 因此不用傳遞
    );
  }

  //商品名稱
  Widget _cartGoodsName() {
    return Container(
      width: ScreenUtil().setWidth(300),
      padding: EdgeInsets.all(10),
      alignment: Alignment.topLeft,//頂端左對齊
      child: Column(
        children: <Widget>[
          Text(item.goodsName),
          CartCount()
        ],
      ),
    );
  }

  //商品價格
  Widget _cartPrice() {
    return Container(
      width: ScreenUtil().setWidth(150),//只要合起來不超過750 就不會溢出
      alignment: Alignment.centerRight,//居中靠右
      child: Column(
        children: <Widget>[
          Text('￥${item.price}'),
          Container(//用來放icon刪除按鈕
            child: InkWell(
              onTap: (){},
              child: Icon(
                Icons.delete_forever,
                color: Colors.black26,//淺灰色
                size: 30,
              ),
            ),
          )
        ],
      ),
    );
  }

}

View Code