鸿蒙版瑞幸咖啡开发日记(六)详情页与首页联动
鸿蒙版瑞幸咖啡开发日记之详情页与首页联动
- 1.需实现的功能总结
- 2.详细功能开发
- 2.1 添加已点咖啡到菜单栏
- 2.2 已点咖啡是否展示
- 2.3 陷阱提示
首先我们来看一下最终的实现效果【添加不同的咖啡后,自动更新价格和数量,并且添加到首页底部的已点菜单栏中】
1.需实现的功能总结
- 点击
加入购物车
后,首页对应的咖啡右边的数量进行更新,并且底部菜单栏中的总数量进行更新 - 实时计算所有已点咖啡的预计到手价格
- 将所有的已点咖啡展示在底部菜单栏中,点击后显示,再次点击后隐藏【当然这里还需要隐藏配送费6元,再买24.6…】
2.详细功能开发
2.1 添加已点咖啡到菜单栏
- 首先我们编写菜单栏中的已点咖啡的模板文件
template_ordered.xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="110vp"ohos:width="match_parent"ohos:orientation="horizontal"><Imageohos:left_margin="15vp"ohos:layout_alignment="vertical_center"ohos:height="20vp"ohos:width="20vp"ohos:image_src="$media:choose"ohos:scale_mode="zoom_center"ohos:clip_alignment="center"/><Imageohos:left_margin="20vp"ohos:id="$+id:coffee_img"ohos:height="90vp"ohos:width="90vp"ohos:image_src="$media:coffee1"ohos:scale_mode="stretch"ohos:clip_alignment="center"ohos:layout_alignment="center"/><DirectionalLayoutohos:left_margin="14vp"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Textohos:top_margin="5vp"ohos:id="$+id:coffee_title"ohos:height="match_content"ohos:width="match_content"ohos:text="厚乳拿铁"ohos:text_color="#313131"ohos:text_size="20fp"ohos:text_alignment="center"/><Textohos:id="$+id:coffee_taste"ohos:height="match_content"ohos:width="match_content"ohos:text="热/不另外加糖"ohos:text_color="#313131"ohos:text_size="12fp"ohos:text_alignment="center"/><DirectionalLayoutohos:height="26vp"ohos:width="match_parent"ohos:top_margin="28vp"ohos:orientation="horizontal"><Textohos:id="$+id:coffee_price"ohos:height="match_content"ohos:width="match_content"ohos:text="¥16"ohos:text_color="#dd5810"ohos:text_size="18fp"ohos:text_alignment="center"/><DirectionalLayoutohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right"ohos:orientation="horizontal"><Imageohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:minus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/><Textohos:id="$+id:coffee_num"ohos:height="match_content"ohos:width="match_content"ohos:left_margin="2vp"ohos:right_margin="2vp"ohos:text="1"ohos:text_alignment="vertical_center"ohos:text_size="20fp"/><Imageohos:height="32vp"ohos:width="32vp"ohos:image_src="$media:plus"ohos:layout_alignment="vertical_center"ohos:padding="5vp"ohos:scale_mode="stretch"/></DirectionalLayout></DirectionalLayout></DirectionalLayout>
</DirectionalLayout>
- 将详情页的信息渲染到模板中
当我们在详情页点击
添加购物车
后,需要将已点咖啡添加到菜单栏中,其实这里的逻辑还是比较复杂的,主要是要对PageSlice的生命周期有一定的基础,不然无从下手,大家可以先思考一下,你拿到回调的信息后如何渲染到已点咖啡的模板中!
可能你会想为什么不能在回调方法onResult中渲染模板,你可以尝试一下,是不行的,因为这里我们无法获取模板中的组件【比如说通过findComponentById获得组件】,只能对模板中的信息进行修改更新。所以我们另辟蹊径,通过pageSlice的生命周期渲染模板
【如图所示:我们如何渲染模板呢?】
我们知道:
- 常见的生命周期中加载界面为onStart(第一次) → onActive
- 当我们从两一个界面切回到当前界面时生命周期为 onForeground → onActive
- 那么添加了回调方法onResult后,为onResult→ onForeground → onActive
因此,我们可以在onResult方法中获取到回调信息,在onForeground中对模板信息进行渲染
@Override
public void onForeground(Intent intent) {super.onForeground(intent);// 更新每一个咖啡后面紧跟的咖啡数量DirectionalLayout curCoffee = everyCoffee.get(curClickCoffee);Text textNum = (Text) curCoffee.findComponentById(ResourceTable.Id_num);int num = Integer.parseInt(textNum.getText()) + totalNum;textNum.setText(num + "");// 更新总数量int curTotalNum = Integer.parseInt(txt_totalNum.getText());txt_totalNum.setText(curTotalNum + totalNum + "");// 更新当前总价countCartPrice(totalNum * price,true);// 加载已点咖啡到核算栏if (!isCoffeeExist.contains(title)){initCoffeeOrder();isCoffeeExist.add(title);}else{updateCoffeeOrder(true);}
}// 计算已点菜单价格
private void countCartPrice(int price, boolean isadd) {int total = Integer.parseInt(txt_price.getText().substring(1));if (isadd) {total = total + price;} else {total = total - price;}txt_price.setText("¥"+total);
}private void initCoffeeOrder(){DirectionalLayout tempOrder = (DirectionalLayout) LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_template_ordered, null, false);Text tempTitle = (Text) tempOrder.findComponentById(ResourceTable.Id_coffee_title);Text tempPrice = (Text) tempOrder.findComponentById(ResourceTable.Id_coffee_price);Text tempTaste = (Text) tempOrder.findComponentById(ResourceTable.Id_coffee_taste);Text tempNum = (Text) tempOrder.findComponentById(ResourceTable.Id_coffee_num);getUITaskDispatcher().asyncDispatch(() -> {tempTitle.setText(title);tempPrice.setText("¥"+price);tempTaste.setText(temperature+"/"+sweet);tempNum.setText(totalNum + "");coffeeOrdered.addComponent(tempOrder);});tempOrderCoffee.put(curClickCoffee, tempOrder);
}/*** 更新 底部的已点咖啡* @param isAdd:判断是否点击的是添加按钮*/
private void updateCoffeeOrder(boolean isAdd){DirectionalLayout curClickOrderCoffee = tempOrderCoffee.get(curClickCoffee);Text tempNum = (Text) curClickOrderCoffee.findComponentById(ResourceTable.Id_coffee_num);int num = Integer.parseInt(tempNum.getText());if (isAdd){tempNum.setText(num + totalNum + "");} else {tempNum.setText(num - 1 + "");}
}
我们观察一下,做了哪些事:
- 更新首页中每一个咖啡后面的数量信息【用原来的数量 + 回调信息中的数量】
- 更新菜单栏中的总数量【用原来的数量 + 回调信息中的数量】
- 更新当前的预计到手总价【用原来的总价 + 回调信息中的数量 * 回调信息中的单价】
- 加载加载已点咖啡到核算栏,但是这里又有个小细节
- 当我们这一类咖啡已经点过了,我们只更新已点咖啡的数量【包括首页中的 和 底部菜单栏中的】
- 当我们第一次点这类咖啡,我们渲染模板后添加到容器中
- 所以这里我使用了一个
HashSet
作为容器,用咖啡的名称作为判断的哈希依据
- 这里还有一个细节,不知道大家注意没有!!!就是我们如何准确获取到每一个首页中的咖啡,对其右侧数量进行更新
我是使用了一个List作为容器,直接获取当前列表中的点击的第
curClickCoffee
个咖啡模板
包括,底部的菜单中的已点咖啡我们也用一个HashMap容器进行包裹
我们再重新回过头来看,这不是一切都清晰明了了!当我们需要更新模板中的信息时,只要根据 curClickCoffee 获取当前点击的模板,然后对其中表示数量的文本组进行数量更新
2.2 已点咖啡是否展示
我们平时使用APP时,可以点击核算栏【菜单栏】后会展示详细我们已点的咖啡,就是2.1节我们渲染的模板,再次点击后会隐藏
// 显示所有的已点咖啡private void showCartCoffee(){Component cartDL = findComponentById(ResourceTable.Id_cart_dl);Component coffeeOrder = findComponentById(ResourceTable.Id_coffee_order);Component discount =findComponentById(ResourceTable.Id_discount_txt);cartDL.setClickedListener(component -> {if (!isShowCoffeeMenu){discount.setVisibility(Component.HIDE);coffeeOrder.setVisibility(Component.VISIBLE);cartDL.setMarginTop(vp2px(28));isShowCoffeeMenu = !isShowCoffeeMenu;}else {discount.setVisibility(Component.VISIBLE);coffeeOrder.setVisibility(Component.HIDE);isShowCoffeeMenu = !isShowCoffeeMenu;cartDL.setMarginTop(0);}});}
这里又有细节哦,我们点击显示已点开发后,中间的优惠信息会被隐藏,这时候需要我们cartDL.setMarginTop(vp2px(28))
设置一个边距,不然下面的信息会跑上去【因为文本被隐藏了】,再次点击后我们重新显示优惠信息,将已点咖啡隐藏……中间的一切通过一个boolean变量控制是否显示已点咖啡
2.3 陷阱提示
我们回想喝多种品类的咖啡,因此我们点击首页不同的咖啡 右边对应的+
按钮时,会发现上一次点击的咖啡温度和糖度,以及数量会被保存下来!这是一个小Bug,当时我思考了很久为什么?我们可以看一下这个Bug!!
添加第二类咖啡的时候,温度、糖度和数量都没被重置!
这里因为回调的时候虽然使用了terminate销毁了当前界面,但是我们使用setText设置的文本信息已经被保存在了xml文件中,换句话说我们xml文件中的文本已经变成了你点击后的值,并不会在下一次重新点击后重新换回来,我们重新加载slice,只是加载了xml文件;【但是你的xml文件已经被改动过了对吧!】
考虑到用户可能会喜欢统一的温度和糖度,所以这两个不更改,只对已点数量进行修改【因为调用terminate会自动调用onStop销毁页面,所以我们直接通过生命周期的onStop方法在每一次销毁前,将已点数量恢复到 1
即可】
鸿蒙版瑞幸咖啡开发日记(六)详情页与首页联动相关推荐
- 鸿蒙版瑞幸咖啡开发日记(二)首页功能实现
鸿蒙版瑞幸咖啡开发日记之首页功能实现 1.需开发的功能归纳 2.首页功能开发 2.1 顶部TabList开发 2.2 一级分类数据渲染 2.3 右侧大分类模板渲染 2.4 右侧具体咖啡数据渲染 2.5 ...
- 鸿蒙版瑞幸咖啡开发日记(一)首页布局设计
鸿蒙版瑞幸咖啡开发日记之首页布局设计 1.整体布局设计思路 2.三大模块开发 2.1 头部信息栏的开发 2.2 中间菜单栏的开发 2.2.1 一级分类菜单 2.2.2 二级分类菜单思路整理 2.2.3 ...
- 鸿蒙版瑞幸咖啡开发日记(三)购物车结算栏开发
鸿蒙版瑞幸咖啡开发日记之已点咖啡结算栏开发 1.整体设计思路 2.购物车结算栏布局设计 2.1 右侧购物车图标 2.2 购物车结算栏 2.3 已点咖啡数量圆圈 2.4 已点咖啡模板 这里我实现的效果其 ...
- 鸿蒙版瑞幸咖啡开发日记(五)咖啡详情页逻辑实现
鸿蒙版瑞幸咖啡开发日记之咖啡详情页逻辑实现 1.逻辑归纳 2.开发流程 2.1 咖啡标题 2.2 温度和糖度选择 2.3 数量选择 2.4 结算后返回 3.整体代码 我们先来看一下总体的效果 1.逻辑 ...
- 小程序·云开发 - 仿瑞幸咖啡小程序(一) - 从入门到辞职
最近新开一个瑞幸咖啡小程序的项目.刚好看到小程序有新的功能 - 云开发,就开始边做边学了. 首先,开启一个新的项目的时候,勾选云开发. 新建完项目之后,小程序就可以进行云开发服务了. 需要注意的是,新 ...
- 瑞幸咖啡 CEO 和 COO 被暂停职务;快手起诉抖音索赔 500 万元;Wine 5.8 发布 | 极客头条...
整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦 ...
- 互联网日报 | 滴滴货运成都、杭州上线;瑞幸咖啡再收纳斯达克退市通知;我国完成北斗全球系统星座部署...
今日看点 ✦ 腾讯股价再创新高,总市值4.75万亿港元超越阿里巴巴成港股第一 ✦ 瑞幸咖啡:因未能提交年度报告,收到纳斯达克摘牌通知 ✦ 滴滴货运成都.杭州上线,用户可通过滴滴出行App"货 ...
- 互联网晚报 | 2月7日 星期一 | 中国女足亚洲杯夺冠;瑞幸咖啡已履行1.8亿美元民事罚款;快狗打车通过港交所上市聆讯...
今日看点 ✦ 中国女足3:2逆转韩国女足,第9次夺得亚洲杯冠军 ✦ 快狗打车通过港交所上市聆讯,2021年前三季度收入大幅上涨 ✦ 瑞幸咖啡:已履行与SEC和解相关的1.8亿美元民事处罚 ✦ 刘强东将 ...
- 搞砸了瑞幸咖啡,资本老炮陆正耀会把小面毁了吗?
文/琥珀消研社 作者/白露 听说了吗?割美国韭菜请中国人喝咖啡的"带慈善家"陆正耀,老陆,又撸起袖子准备进军餐饮业了. 曾经的资本眼泪.正义铁锤.华尔街收割机,这回,估计暴打不了资 ...
- 互联网晚报 | 1月29日 星期六 | 支付宝相互宝正式关停;大钲资本成瑞幸咖啡实控人;苹果创有史以来最高单季营收...
今日看点 ✦ 苏宁易购发布2021年度业绩预告:预计全年净亏损423亿元-433亿元 ✦ 支付宝相互宝正式关停:上线不到4年,有1亿多用户参与 ✦ 瑞幸重组最新进展:大钲资本成控股股东,陆正耀.钱治亚 ...
最新文章
- cpu计算机兼容,电脑升级之CPU篇:给CPU升级主要是兼容性问题,其他方法也用不上...
- 为何人工智能首推Python 初学者怎么学Python
- 网络推广是什么告诉大家如何高效提高网站权重?
- git stash的用法
- tgz文件linux打开,tgz文件扩展名,tgz文件怎么打开?
- 机器学习理论《统计学习方法》学习笔记:第四章 朴素贝叶斯法
- 《那些年啊,那些事——一个程序员的奋斗史》——44
- Flask蓝图使用的方法
- 虚拟软件VMware workstation安装
- UNIX系统编程小结(三)----进程相关
- 在Java代码(非JSP及Action,Servlet,Controller)中获得WebRoot的物理路径
- 如何监控 Tomcat?Zabbix 与 Cloud Insight 对比
- 服务器芯片封装,【芯极速】干货|一文看懂集成电路芯片封装及芯片组!
- (转)一个偷食禁果的女孩--一件我亲眼目睹的真实感人故事
- pat2020春季 7-2 The Judger (25分)
- 1957:【12NOIP普及组】质因数分解
- 家装灯线走线图_家装吊顶筒灯电线走法设计图 4款客厅天花吊顶龙骨筒灯顶线布置图...
- java搭建直播商城VR全景商城 saas商城 b2b2c商城 o2o商城 积分商城 秒杀商城 拼团商城 分销商城
- Trinity使用流程
- 2022年全球区块链审计公司排行榜
热门文章
- 哪些情况会造成小程序违规或下架
- 天池龙珠训练营Python_Task2: 数据结构_(4)字典
- 【毕业设计】46-基于单片机的智能卫浴系统设计(原理图工程+仿真工程+源代码+答辩论文+答辩PPT)
- NSCalendar 日历类
- Android手机ram大小,安卓手机RAM容量演进史,如何从192MB走到16GB,HTC:我有话要说...
- C语言学习笔记---字符处理函数getc()和getchar()函数
- 经典算法:鸡蛋掉落问题
- PSD是什么文件格式
- ai旋转扭曲_【AI~扭曲】旋转扭曲、收拢、膨胀、扇贝、晶格化、皱褶工具(转)...
- IP-guard全部22个功能模块简介