1. 双击点赞和双击取消点赞

如：在抖音中双击屏幕之后就可以点赞，小红心就会变亮
把白色和红色的心形图片复制到 media 下
需要图片的可以自取，下面白色图片由于没有背景，所以显示的是白色的，下载后鼠标点击就能看见了
因为要双击屏幕才能点赞，所以还要给布局组件id
代码实现：

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutohos:id="$+id:dl"xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Imageohos:id="$+id:img"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:white"ohos:background_element="cyan"></Image></DirectionalLayout>

MainAbilitySlice

package com.xdr630.listenerapplication6.slice;import com.xdr630.listenerapplication6.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener {Image image;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//1.找到图片组件image = (Image) findComponentById(ResourceTable.Id_img);//找到铺满屏幕布局的对象DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);//2.给布局添加双击事件dl.setDoubleClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}//如果标记为false，表示没有点赞，此时把白色变为红色//如果标记为true，表示已经点赞，再次双击后，会把红色变回白色boolean flag = false;@Overridepublic void onDoubleClick(Component component) {//修改图片的红星就可以了，只需要用到image就行了，所以把image定为成员变量if (flag){image.setImageAndDecodeBounds(ResourceTable.Media_white);//取消点赞变成白色，也要把flag设置为falseflag = false;}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);//当启动项目的时候，flag初始值是false，就会走下面的else的代码，变成红色后就要把flag变成true了flag = true;}}
}

运行：
双击屏幕点赞：
双击屏幕后取消点赞：

2. 能否按照抖音的业务去实现呢?

业务分析：

双击屏幕之后点赞。（上面已实现），再次双击屏幕之后，不会取消点赞，只有点击后红心之后才能取消点赞。
单击红心也可以点赞，再次单击红心就会取消点赞

实现思路：

给最外层的布局添加双击事件，双击之后点赞，变成红色心。
如果已经被点赞，那么还是修改为红色心，相当于不做任何处理。
给图片添加单击事件。
如果没有点赞，单击之后，白色心变成红色心。
如果已经点赞了，单击之后，红色心变成白色心。

代码实现：
上面布局文件不变，MainAbilitySlice 如下：
给布局添加双击事件，因为再次双击不会取消点赞，所以把else代码里设置为红色后就把 flag 取反去掉，就不会出现再次双击取消点赞了。
给图片添加单击事件，因为涉及到点赞后为红色，再取消就变为白色，所以要把 flag 变为相反的操作

package com.xdr630.listenerapplication6.slice;import com.xdr630.listenerapplication6.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.Image;public class MainAbilitySlice extends AbilitySlice implements Component.DoubleClickedListener, Component.ClickedListener {Image image;@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//1.找到图片组件image = (Image) findComponentById(ResourceTable.Id_img);//找到铺满屏幕布局的对象DirectionalLayout dl = (DirectionalLayout) findComponentById(ResourceTable.Id_dl);//2.给布局添加双击事件dl.setDoubleClickedListener(this);//3.给图片添加单击事件image.setClickedListener(this);}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}//如果标记为false，表示没有点赞，此时把白色变为红色//如果标记为true，表示已经点赞，再次双击后，会把红色变回白色boolean flag = false;@Overridepublic void onDoubleClick(Component component) {//修改图片的红星就可以了，只需要用到image就行了，所以把image定为成员变量if (flag){image.setImageAndDecodeBounds(ResourceTable.Media_white);//取消点赞变成白色，也要把flag设置为falseflag = false;}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);//当启动项目的时候，flag初始值是false，就会走下面的else的代码，此时设置为红色，把flag去掉，再次双击后就还是红色了}}@Overridepublic void onClick(Component component) {if (flag){image.setImageAndDecodeBounds(ResourceTable.Media_white);flag = false;}else{image.setImageAndDecodeBounds(ResourceTable.Media_red);flag = true;}}
}

运行：
单击红心后：
再次单击红心：
双击屏幕后效果如下，再次双击屏幕就不会取消点赞了，只有点击小红心才能取消点赞
【本文正在参与“有奖征文 | HarmonyOS征文大赛”活动】
https://marketing.csdn.net/p/ad3879b53f4b8b31db27382b5fc65bbc

HarmonyOS实战—实现抖音点赞和取消点赞效果相关推荐

查询抖音账号关注数点赞数
直接上料,不绕弯子. 查询抖音账号关注数点赞数等地址:https://www.iesdouyin.com/web/api/v2/user/info/?sec_uid= sec_uid是查询接口需要的必 ...
Redis是如何实现点赞、取消点赞的？
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料作者:solocoder juejin.im/post/5bdc2 ...
微信几亿人在线的点赞、取消点赞系统，用Redis如何实现？
戳蓝字"CSDN云计算"关注我们哦! 作者 | solocoder 责编 | 阿秃点赞功能大家都不会陌生,像微信这样的社交产品中都有,但别看功能小,想要做好需要考虑的东西还挺多的 ...
mysql实现点赞和取消_Redis是如何实现点赞、取消点赞的？
作者:solocoder juejin.im/post/5bdc257e6fb9a049ba410098 本文基于 SpringCloud, 用户发起点赞.取消点赞后先存入 Redis 中,再每隔两小 ...
Redis如何高效实现点赞、取消点赞功能
点击关注公众号,实用技术文章及时了解来源:blog.csdn.net/lsy0903/article/details/103949459 基于 SpringCloud, 用户发起点赞.取消点赞后先存 ...
文章点赞以及取消点赞功能
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; va ...
用asp.net实现微博系统_微信几亿人在线的点赞、取消点赞系统，用Redis如何实现？...
戳蓝字"CSDN云计算"关注我们哦!作者 | solocoder责编 | 阿秃点赞功能大家都不会陌生,像微信这样的社交产品中都有,但别看功能小,想要做好需要考虑的东西还挺多的,如海 ...
微信小程序——点赞和取消点赞功能的实现
这个项目是一个有前后端的微信小程序,能够发布和查看论文,并可以给论文点赞.这篇文章主要介绍点赞和取消点赞功能的实现. 一.成果展示用户没有点赞的状态(可能有点看不清,是一个空的心的图标). 点一下之 ...
微信小程序实现列表页的点赞和取消点赞功能！
今天开发了一个文章的留言版块,于是想到要为某个留言点赞,点过赞的再次点击会取消点赞,代码如下: /*更新点赞*/ update_zan:function(e){ var that = this; va ...

HarmonyOS实战—实现抖音点赞和取消点赞效果

文章目录

1. 双击点赞和双击取消点赞

2. 能否按照抖音的业务去实现呢?

HarmonyOS实战—实现抖音点赞和取消点赞效果相关推荐

最新文章

热门文章

HarmonyOS实战—实现抖音点赞和取消点赞效果

文章目录

1. 双击点赞 和 双击取消点赞

2. 能否按照抖音的业务去实现呢?

HarmonyOS实战—实现抖音点赞和取消点赞效果相关推荐

最新文章

热门文章

1. 双击点赞和双击取消点赞