Flutter实战视频-移动电商-62.购物车_首页Provide化 让跳转随心所欲
62.购物车_首页Provide化 让跳转随心所欲
新建provide/currentIndex.dart
内容比较简单,定义一个变量当前页面的索引currentIndex,再定义一个方法改变它的值
provide全局注册main.dart
index_page.dart
引入provide和currentIndexProvide
然后把首页的代码先都注释掉,之前我们这个页面是一个StateFul的widget,现在我们要改成静态的 原来的一些代码也可以用
下面开始重写index页面
写build内的代码
Scaffold的方法从原来注释的代码里面复制过来,setstate的代码注释掉 用不到 了。我们要用provide
点击事件,调用provide里的改变当前索引值的方法
效果展示
测试页面底部栏目的切换
点击详情页面的购物车按钮,跳转到购物车的页面
pages/details_page/_bottom.dart
购物车的onTap事件
大R刷新,最终效果展示
最终代码
provide/currentIndex.dart
import 'package:flutter/material.dart'; class CurrentIndexProvide with ChangeNotifier{
int currentIndex=; changeIndex(int newIndex){
currentIndex=newIndex;
notifyListeners();//通知
}
}
pages/index_page.dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_page.dart';
import 'category_page.dart';
import 'cart_page.dart';
import 'member_page.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../provide/currentIndex.dart'; class IndexPage extends StatelessWidget { final List<BottomNavigationBarItem> bottomTabs=[
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.home),//这里使用IOS风格的
title: Text('首页')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.search),
title: Text('分类')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.shopping_cart),
title: Text('购物车')
),
BottomNavigationBarItem(
icon:Icon(CupertinoIcons.profile_circled),
title: Text('会员中心')
)
];
final List<Widget> tabBodies=[
HomePage(),
CategoryPage(),
CartPage(),
MemberPage()
]; @override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: ,height: )..init(context);
return Provide<CurrentIndexProvide>(
builder: (context,child,val){
int currentIndex=Provide.value<CurrentIndexProvide>(context).currentIndex;
return Scaffold(
backgroundColor: Color.fromRGBO(, , , 1.0),//颜色固定死,比白色稍微灰一点
bottomNavigationBar: BottomNavigationBar(
type:BottomNavigationBarType.fixed,
currentIndex: currentIndex,//当前索引值
items: bottomTabs,
onTap: (index){
Provide.value<CurrentIndexProvide>(context).changeIndex(index);
},
),
body: IndexedStack(
index: currentIndex,
children: tabBodies,
),
);
},
);
}
}
pages/details_page/details_bottom.dart
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provide/provide.dart';
import '../../provide/cart.dart';
import '../../provide/details_info.dart';
import '../../provide/currentIndex.dart'; class DetailsBottom extends StatelessWidget {
@override
Widget build(BuildContext context) {
var goodsInfo=Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo;//当前商品的详情
var goodsId=goodsInfo.goodsId;
var goodsName=goodsInfo.goodsName;
var count=;//默认为1
var price=goodsInfo.presentPrice;
var images=goodsInfo.image1; return Container(
width: ScreenUtil().setWidth(),
color: Colors.white,
height: ScreenUtil().setHeight(),
child: Row(
children: <Widget>[
InkWell(
onTap: (){
Provide.value<CurrentIndexProvide>(context).changeIndex();
Navigator.pop(context);
},
child: Container(
width: ScreenUtil().setWidth(),
alignment: Alignment.center,
child: Icon(
Icons.shopping_cart,
size:,//图标没有自适应 要是设置size的大小
color: Colors.red,
),
),
),
InkWell(
onTap: () async{
await Provide.value<CartProvide>(context).save(goodsId, goodsName, count, price, images);
},
child: Container(
alignment: Alignment.center,
width: ScreenUtil().setWidth(),//750 - 110 再除以2 评分
height: ScreenUtil().setHeight(),
color: Colors.green,
child: Text(
'加入购物车',
style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp()),
),
),
),
InkWell(
onTap: () async{
await Provide.value<CartProvide>(context).remove();
},
child: Container(
alignment: Alignment.center,
width: ScreenUtil().setWidth(),//750 - 110 再除以2 评分
height: ScreenUtil().setHeight(),
color: Colors.red,
child: Text(
'立即购买',
style:TextStyle(color:Colors.white,fontSize: ScreenUtil().setSp()),
),
),
)
],
),
);
}
}
Flutter实战视频-移动电商-62.购物车_首页Provide化 让跳转随心所欲的更多相关文章
- Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...
- Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局
53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...
- Flutter实战视频-移动电商-54.购物车_商品列表子项布局
54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...
- Flutter实战视频-移动电商-55.购物车_底部结算栏UI制作
55.购物车_底部结算栏UI制作 主要做下面结算这一栏目 cart_bottom.dart页面 先设置下内边距 拆分成三个子元素 全选 因为有一个文本框和一个全选的text文本,所以这里也用了Row布 ...
- Flutter实战视频-移动电商-56.购物车_商品数量控制区域制作
56.购物车_商品数量控制区域制作 主要做购物车中的数量这里 cart_page文件夹下新建cart_count.dart 减少按钮 因为会有点击事件,所以这里我们使用InkWell. child里面 ...
- Flutter实战视频-移动电商-57.购物车_在Model中增加选中字段
57.购物车_在Model中增加选中字段 先修改model类 model/cartInfo.dart类增加是否选中的属性 修改provide 修改UI部分pages/cart_page/cart_it ...
- Flutter实战视频-移动电商-58.购物车_删除商品功能制作
58.购物车_删除商品功能制作 主要做购物车后面的删除按钮 删除的方法写在provide里面 provide/cart.dart文件 传入goodsId,循环对比,找到后进行移除 //删除单个购物车商 ...
- Flutter实战视频-移动电商-59.购物车_计算商品价格和数量
59.购物车_计算商品价格和数量 本节课主要是加上自动计算的功能 provide/cart.dart 在provide的类里面增加两个变量 cart_bottom.dart 三个组件因为我们都需要套一 ...
- Flutter实战视频-移动电商-60.购物车_全选按钮的交互效果制作
60.购物车_全选按钮的交互效果制作 主要做全选和复选框的这两个功能 provide/cart.dart 业务逻辑写到provide里面 先持久化取出来字符串,把字符串编程list.循环list ca ...
随机推荐
- 系统安全-SElinux
Selinux是[security-Enhanced Linux]的简称,是美国国家安全局[NSA]和[SCC]开发的Linux的一个扩张强制访问控制安全模块. 因为企业的业务平台的服务器上存储着大量 ...
- webpack打包问题
最近项目里需要替换一个logo,原先的logo打包后生成的静态文件里有对应的图片,替换了新的的图片打包后并没有生成相应的静态文件,两个图片都在同一个文件目录下,而且图片是直接引入并不会出现打包不到图片 ...
- source insight 配置小记
0/ Alt + T 打开 Document Options,设置字体,添加 C++ 类型文件 .cc , 删除 Plain txt 类型以避免添加 .txt 文件 1/ Alt + F12 切换函数 ...
- 模式匹配之sift--- sift图像特征提取与匹配算法代码
sift,The Scale Invariant Feature Transform ,尺度不变特征变换,是检测图像中具有唯一性.对图像平移.旋转.缩放.甚至仿射变换(如从不同角度拍摄图片)保持不变性 ...
- ComboBox在WPF中的绑定示例:绑定项、集合、转换,及其源代码
示例1.Selector(基类) 的示例Controls/SelectionControl/SelectorDemo.xaml <Page x:Class="Windows10.Con ...
- 超实用的 Nginx 极简教程,覆盖了常用场景(转)
概述 安装与使用 安装 使用 nginx 配置实战 http 反向代理配置 负载均衡配置 网站有多个 webapp 的配置 https 反向代理配置 静态站点配置 搭建文件服务器 跨域解决方案 参考 ...
- [Java SE] 字符串连接
Java 支持多种字符串连接方式,总结如下: package cn.spads.tool.string; import java.text.MessageFormat; /** * <b> ...
- 基于springboot的Dubbo的常规总结
1.引入jar包: <!-- Spring Boot Dubbo 依赖 --> <dependency> <groupId>com.alibaba.spring.b ...
- buntu下命令行安装jdk,android-studio,及genymotion虚拟机来进行android开发【转】
本文转载自:http://www.cnblogs.com/iamhenanese/p/5491862.html 安装JDK 从oracle官网下最新版的linux64位的jdk包(现在最新为jdk-8 ...
- ES6 对Number的扩展
Number.isFinite(), Number.isNaN() ES6 在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法. Number.is ...