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(),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
width: ScreenUtil().setWidth(),
child: Text(
'合计:',
style:TextStyle(
fontSize:ScreenUtil().setSp()
)
),
),
//红色的价格
Container(
alignment: Alignment.centerLeft,
width: ScreenUtil().setWidth(),
child: Text(
'¥1992',
style: TextStyle(
fontSize: ScreenUtil().setSp(),
color: Colors.red
)
),
)
],
),
//第二行
Container(
width: ScreenUtil().setWidth(),//和第一行一样宽
alignment: Alignment.centerRight,
child: Text(
'满10元免配送费,预购免配送费',
style: TextStyle(
color: Colors.black38,
fontSize: ScreenUtil().setSp()
),
),
)
],
),
);
} //结算 用 inkWell
Widget _goButton(){
return Container(
width: ScreenUtil().setWidth(),
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

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: ,
left: ,
child: CartBottom(),
)
],
); }else{
return Text('正在加载');
}
},
),
);
} Future<String> _getCartInfo(BuildContext context) async{
await Provide.value<CartProvide>(context).getCartInfo();
//print('=========================获取购物车内数据');
return 'end';
} }

Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作的更多相关文章

  1. Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改

    52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...

  2. Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局

    53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...

  3. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...

  4. Flutter实战视频-移动电商-56.购物车_商品数量控制区域制作

    56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面 ...

  5. Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段

    57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_it ...

  6. Flutter实战视频-移动电商-58.购物车_删除商品功能制作

    58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商 ...

  7. Flutter实战视频-移动电商-59.购物车_计算商品价格和数量

    59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...

  8. Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作

    60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...

  9. Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

    61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...

随机推荐

  1. diff patch

    http://rails-deployment.group.iteye.com/group/wiki/1318-diff-and-patch-10-minutes-guide 情景一:你正尝试从代码编 ...

  2. Spring Cloud(十二):Spring Cloud Zuul 限流详解(附源码)(转)

    前面已经介绍了很多zuul的功能,本篇继续介绍它的另一大功能.在高并发的应用中,限流往往是一个绕不开的话题.本文详细探讨在Spring Cloud中如何实现限流. 在 Zuul 上实现限流是个不错的选 ...

  3. Gson解析数组和list容器

    Gson解析数组和list容器 使用Gson解析首先须要增加架包文件:gson-2.2.4.jar 定义一个类Student: public class Student { String name=& ...

  4. 谈谈 T 型人才

    谈谈 T 型人才   昨天的图片发模糊了,正好我把这个话题展开聊一聊吧.这个话题是关于复合型人才的,我把它称作 T 型人才. 「全栈」工程师 前一段时间,「全栈」工程师的概念很火,不过大多数时候,「全 ...

  5. 命令行查看memcached的运行状态(转载)

    很多时候需要监控服务器上的Memcached运行情况,比如缓存的查询次数,命中率之类的.但找到的那个memcached-tool是linux下用perl写的,我也没试过windows能不能用.后来发现 ...

  6. Hadoop开发

    HDFS HDFS提供一套Java API来操作HDFS,包括文件的建立.修改.删除.权限管理等,下面对几个常用的API进行介绍,详细的API接口请参见API文档,可以在${HADOOP_HOME}/ ...

  7. iOS 打开应用与系统功能的调用

    [[UIApplication sharedApplication] openURL:url]; 通过给url不同的值,可以实现调用系统自带 电话/短信/邮箱/浏览器/...   1.调用 电话pho ...

  8. 常用的ES6

    1 let 和 const 作用域: 只在声明指令的块级作用域内有效.① let所声明的变量可以改变,值和类型都可以改变,没有限制. let a = 123 a = 456 // 正确,可以改变 le ...

  9. 在ubuntu 64位的机器上执行arm-linux-gcc提示 no such file or directory【转】

    本文转载自:http://blog.csdn.net/sno_guo/article/details/17059381 解压好了arm-linuxg-gcc 放到了$PATH路径下, 无论怎么执行都提 ...

  10. 网站流量统计之PV和UV

    转自:http://blog.csdn.NET/webdesman/article/details/4062069 如果您是一个站长,或是一个SEO,您一定对于网站统计系统不会陌生,对于SEO新手来说 ...