Flutter實戰視頻-移動電商-54.購物車_商品列表子項佈局

54.購物車_商品列表子項佈局

 

子項作成一個單獨的頁面

新建cartItem.dart文件

新建cart_page文件夾，在裏面新建cart_item.dart頁面，

頁面名字叫作CartItem

定義變量，購物車的model類，構造函數接收

先作一下上下左右的邊距，margin是外邊距。padding是內邊距

內邊距，外邊距，下邊的邊框樣式

咱們這裏使用Row佈局，把沒一塊都分紅一個單獨的Widget防止嵌套

首先編寫複選按鈕的樣式

商品圖片方法：

 

商品名稱

由於咱們還要作商品的數量的加減，因此這裏用了Column佈局

 

商品價格

 

拼裝方法

 

 

cart_page

 

效果展現

 

最終代碼

cart_item.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/cartInfo.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)
        ],
      ),
    );
  }

  //商品價格
  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

cart_page.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'package:flutter_shop/provide/cart.dart';
import 'cart_page/cart_item.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('購物車'),
      ),
      body: FutureBuilder(
        future: _getCartInfo(context),
        builder: (context,snapshot){
          if(snapshot.hasData){
           
            List cartList=Provide.value<CartProvide>(context).cartList;
            //return Text('有數據啊'+cartList.length.toString());
            return ListView.builder(
              itemCount: cartList.length,
              itemBuilder: (context,index){
                return CartItem(cartList[index]);
              },
            );
          }else{
            return Text('正在加載');
          }
        },
      ),
    );
  }

  Future<String> _getCartInfo(BuildContext context) async{
    await Provide.value<CartProvide>(context).getCartInfo();
    //print('=========================獲取購物車內數據');
    return 'end';
  }

}

View Code