Flutter实战视频-移动电商-65.会员中心_订单区域UI布局
65.会员中心_订单区域UI布局
我的订单区域
member.dart写我的标题的方法
布局使用瓦片布局
先做修饰,decoration颜色的背景,下边线的样式
//我的订单标题
Widget _orderTitle(){
return Container(
margin: EdgeInsets.only(top: ),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: ,color: Colors.black12)
)
),
child: ListTile(
leading: Icon(Icons.list),
title: Text('我的订单'),
trailing: Icon(Icons.arrow_right),
),
);
}
继续下面
这里是个Row横向的布局
设置边距 宽度和高度和颜色。
然后里面用Row布局,布局里面每一个用Container
做好一个Container布局,然后其他的三个就可以直接复制
Widget _orderType(){
return Container(
margin: EdgeInsets.only(top:),
width: ScreenUtil().setWidth(),
height: ScreenUtil().setHeight(),
padding: EdgeInsets.only(top: ),
color:Colors.white,
child: Row(
children: <Widget>[
Container(
width: ScreenUtil().setWidth(),
child: Column(
children: <Widget>[
Icon(
Icons.query_builder,
size: ,
),
Text(
'待付款'
)
],
),
),
Container(
width: ScreenUtil().setWidth(),
child: Column(
children: <Widget>[
Icon(
Icons.query_builder,
size: ,
),
Text(
'待发货'
)
],
),
),
Container(
width: ScreenUtil().setWidth(),
child: Column(
children: <Widget>[
Icon(
Icons.directions_car,
size: ,
),
Text(
'待收货'
)
],
),
),
Container(
width: ScreenUtil().setWidth(),
child: Column(
children: <Widget>[
Icon(
Icons.content_paste,
size: ,
),
Text(
'待评价'
)
],
),
)
],
),
);
}
效果展示
Flutter实战视频-移动电商-65.会员中心_订单区域UI布局的更多相关文章
- Flutter实战视频-移动电商-64.会员中心_顶部头像UI布局
64.会员中心_顶部头像UI布局 会员中心的样式 member.dart 清除原来的代码生成一个基本的结构 默认返回一个scaffold脚手架工具,body里面布局使用ListView,这样不会出现纵 ...
- Flutter实战视频-移动电商-66.会员中心_编写ListTile通用方法
66.会员中心_编写ListTile通用方法 布局List里面嵌套一个ListTile的布局效果 里面有很多条记录,以后可能还会增加,所以这里我们做一个通用的组件 通用组件方法 这里使用Column布 ...
- Flutter实战视频-移动电商-45.详细页_说明区域UI编写
45.详细页_说明区域UI编写 pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/ ...
- Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局
30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...
- Flutter实战视频-移动电商-25.列表页_使用Provide控制子类-1
25.列表页_使用Provide控制子类-1 主要是二级分类的UI布局 1分15秒 生成我们的右侧动态类 定义list变量 开始写里面的子项,把每一个小的写了 再拼成一个大的 这样我们的小类就写完了 ...
- Flutter实战视频-移动电商-34.列表页_小BUG的修复
34.列表页_小BUG的修复 当高粱酒的子类没有数据返回的时候就会报错. 解决接口空数据报错的问题 没有数据的时候,给用户一个友好的提示, 我们没有数据的时候还要告诉用户,提示一下他没有数据,在我们的 ...
- Flutter实战视频-移动电商-05.Dio基础_引入和简单的Get请求
05.Dio基础_引入和简单的Get请求 博客地址: https://jspang.com/post/FlutterShop.html#toc-4c7 第三方的http请求库叫做Dio https:/ ...
- Flutter实战视频-移动电商-08.Dio基础_伪造请求头获取数据
08.Dio基础_伪造请求头获取数据 上节课代码清楚 重新编写HomePage这个动态组件 开始写请求的方法 请求数据 .但是由于我们没加请求的头 所以没有返回数据 451就是表示请求错错误 创建请求 ...
- Flutter实战视频-移动电商-21.分类页_类别信息接口调试
21.分类页_类别信息接口调试 先解决一个坑 取消上面的GridVIew的回弹效果.就是在拖这个gridview的时候有一个滚动的效果 physics: NeverScrollableScrollPh ...
随机推荐
- paxos算法之粗浅理解
paxos出身 paxos出身名门,它爹是没多久前获得图灵奖的在分布式领域大名鼎鼎的LeslieLamport. paxos为何而生 那么Lamport他老人家为什么要搞这个东东呢,不是吃饱了撑的,而 ...
- Mac 怎么打开两个终端
把光标移到终端上,然后Command+N 启动maven : mvn tomcat7:run
- 深入Garbage First垃圾收集器(二)背景
G1 GC是目前Java HotSpot虚拟机最新的垃圾收集器. 它是一种压缩型收集器,其基本原则是首先收集尽可能多的垃圾,因此被命名为"Garbage First" GC. G1 ...
- return和exit的差别
#include<stdio.h> #include<sys/types.h> #include<sys/wait.h> #include<unistd.h& ...
- 解读OC中的load和initialize
在 Objective-C 中,NSObject 是绝大多数类的基类.而在 NSObject 中有两个类方法 load 和 initialize,那这两个方法是在什么时机被调用呢?父类.Categor ...
- jquery动态加载脚本
如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个JS文件.当你需要延迟加载一些js插件或其它类型的文件时,可以使用这个方法. 一.jQuery getScript()方法加载java ...
- wpf Style也继承(包含内部定义事件)
如何在既定皮肤下为某个style添加内容是我今天碰的问题,皮肤往往是对全局control进行设置的,当然这就无法满足某个个性十足的“另类”了,比如当使用DataGridCheckBoxColumn时, ...
- 【leetcode】Jump Game I, II 跳跃游戏一和二
题目: Jump Game I: Given an array of non-negative integers, you are initially positioned at the first ...
- centos7设置tomcat7为系统服务的方法
1,准备工作: JKD:jdk-7u72-Linux-x64.gz Tomcat:apache-tomcat-7.0.70.tar.gz OS:CentOS linux release 7.2.151 ...
- EasyPusher实现Android手机屏幕桌面直播,实时推送操作画面,用于手游直播等应用
本文转自EasyDarwin开源团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/52651194 由于Android 5.0提供了捕获 ...