本文已收录于专栏
❤️《鸿蒙开发》❤️
欢迎各位关注、三连博主的文章及专栏，每周定期更新1-5篇基础文章，共勉！
目录
一、需求：
二、实现步骤：
2.1 页面布局
2.2 业务实现
一、需求：
本文的需求是模仿抖音的点赞和取消点赞；主要有两个部分，点赞和取消点赞。
点赞有两种方式：
单击为点赞的小爱心
双击屏幕，如果未点赞则为点赞
取消点赞有一种方式：
单击已点赞的小爱心
上述点赞和未点赞的状态是根据小爱心的颜色来区分的，未点赞为白色小爱心，点赞之后为红色小爱心
二、实现步骤：
2.1 页面布局
这一步中需要使用到一个标签，标签是图片控件，我们可以通过设置标签中图片的改变来标志点赞与取消点赞的状态，此外由于我们需要双击屏幕，这个时候我们需要使用到控件最外层的DirectionalLayout控件，因此我们给DirectionalLayout控件添加ID，便于定位。
实现代码：
实现代码：
package com.liziba.demo.slice; import com.liziba.demo.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.ClickedListener, Component.DoubleClickedListener { /** DirectionalLayout控件 */ DirectionalLayout directionalLayout; /** Image控件 */ Image image; /** 是否点赞 true 代表点赞 false 代表取消点赞 */ Boolean like = false; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); // 获取DirectionalLayout控件 directionalLayout = (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl); // 获取Image控件 image = (Image) this.findComponentById(ResourceTable.Id_img); // 注册双击事件 directionalLayout.setDoubleClickedListener(this); // 注册单击事件 image.setClickedListener(this); } /** * 单击事件方法 * * @param component */ @Override public void onClick(Component component) { // 单击修改Image图片 if (component.getId() == ResourceTable.Id_img) { like = !like; image.setImageAndDecodeBounds(like ? ResourceTable.Media_red : ResourceTable.Media_white); } } /** * 双击事件方法 * * @param component */ @Override public void onDoubleClick(Component component) { // 双击修改Image图片，如果未点赞，则修改为红色小红心，如果已点赞则不处理 if (component.getId() == ResourceTable.Id_dl && !like) { image.setImageAndDecodeBounds(ResourceTable.Media_red); } } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } }
