Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作
主要做下面结算这一栏目
cart_bottom.dart页面
先设置下内边距
拆分成三个子元素
全选
因为有一个文本框和一个全选的text文本,所以这里也用了Row布局
合计
先用column布局,上下分成两块,然后上面一行再用Row布局
每行的宽度设置为430的宽度
结算按钮
组合三个小部件
放到页面中预览 cart_page.dart
这里我们使用stack组件,这样把原来的ListView当做子组件嵌入到Stack组件内
效果预览:
我自己打的代码又溢出了。
修改这个地方
修正width后代码
最终代码
cart_bottom.dart
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 ), ), ), ), ); } }
cart_page.dart
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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'; } }