Flutter实战视频-移动电商-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