HarmonyOS（鸿蒙）——模仿抖音点赞和取消点赞-阿里云开发者社区

HarmonyOS（鸿蒙）——模仿抖音点赞和取消点赞

2021-12-11 392

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HarmonyOS（鸿蒙）——模仿抖音点赞和取消点赞

本文已收录于专栏

❤️《鸿蒙开发》❤️

欢迎各位关注、三连博主的文章及专栏，每周定期更新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);
    }
}