Flutter實戰視頻-移動電商-55.購物車_底部結算欄UI製做

55.購物車_底部結算欄UI製做

主要作下面結算這一欄目

 

cart_bottom.dart頁面

先設置下內邊距

拆分紅三個子元素

 

 

全選

由於有一個文本框和一個全選的text文本，因此這裏也用了Row佈局

 

合計

先用column佈局，上下分紅兩塊，而後上面一行再用Row佈局

每行的寬度設置爲430的寬度

結算按鈕

組合三個小部件

 

放到頁面中預覽 cart_page.dart

這裏咱們使用stack組件，這樣把原來的ListView當作子組件嵌入到Stack組件內

 

效果預覽：

我本身打的代碼又溢出了。

修改這個地方

修正width後代碼

 

最終代碼

cart_bottom.dart

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

class CartBottom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5.0),
      color: Colors.white,
      child: Row(
        children: <Widget>[
          _selectAllBtn(),
          _allPriceArea(),
          _goButton()
        ],
      ),
    );
  }
  //全選
  Widget _selectAllBtn(){
    return Container(
      child: Row(
        children: <Widget>[
          Checkbox(
            value: true,
            activeColor: Colors.pink,//激活的顏色
            onChanged: (bool val){},//事件
          ),
          Text('全選')
        ],
      ),
    );
  }
  //合計
  Widget _allPriceArea(){
    return Container(
      width: ScreenUtil().setWidth(430),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                alignment: Alignment.centerRight,
                width: ScreenUtil().setWidth(280),
                child: Text(
                  '合計：',
                  style:TextStyle(
                    fontSize:ScreenUtil().setSp(36)
                  )
                ),
              ),
              //紅色的價格
              Container(
                alignment: Alignment.centerLeft,
                width: ScreenUtil().setWidth(150),
                child: Text(
                  '￥1992',
                  style: TextStyle(
                     fontSize: ScreenUtil().setSp(36),
                     color: Colors.red
                  )
                ),
              )
            ],
          ),
          //第二行
          Container(
            width: ScreenUtil().setWidth(430),//和第一行同樣寬
            alignment: Alignment.centerRight,
            child: Text(
              '滿10元免配送費,預購免配送費',
              style: TextStyle(
                color: Colors.black38,
                fontSize: ScreenUtil().setSp(22)
              ),
            ),
          )
        ],
      ),
    );
  }

  //結算 用 inkWell
  Widget _goButton(){
    return Container(
      width: ScreenUtil().setWidth(160),
      padding: EdgeInsets.only(left:10.0),
      child: InkWell(
        onTap: (){},
        child: Container(
          padding: EdgeInsets.all(10.0),
          alignment: Alignment.center,//居中對齊
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(3.0)//圓角
          ),
          child: Text(
            '結算(6)',
            style: TextStyle(
              color: Colors.white
            ),
          ),
        ),
      ),
    );
  }
}

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';
import 'cart_page/cart_bottom.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 Stack(
              children: <Widget>[
                  ListView.builder(
                    itemCount: cartList.length,
                    itemBuilder: (context,index){
                      return CartItem(cartList[index]);
                    },
                  ),
                  Positioned(
                    bottom: 0,
                    left: 0,
                    child: CartBottom(),
                  )
              ],
            );

          }else{
            return Text('正在加載');
          }
        },
      ),
    );
  }

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

}

View Code