1. 雙擊點贊 和 雙擊取消點贊

• 如：在抖音中雙擊螢幕之後就可以點贊，小紅心就會變亮

• 把白色和紅色的心形圖片複製到media下

• 需要圖片的可以自取，下面白色圖片由於沒有背景，所以顯示的是白色的，下載後滑鼠點選就能看見了

• 因為要雙擊螢幕才能點贊，所以還要給佈局元件id
• 程式碼實現：

ability_main

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    ohos: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">

    <Image
        ohos: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;

    @Override
    public 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);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    //如果標記為false，表示沒有點贊，此時把白色變為紅色
    //如果標記為true，表示已經點贊，再次雙擊後，會把紅色變回白色

    boolean flag = false;

    @Override
    public void onDoubleClick(Component component) {
        //修改圖片的紅星就可以了，只需要用到image就行了，所以把image定為成員變數

        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            //取消點贊變成白色，也要把flag設定為false
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            //當啟動專案的時候，flag初始值是false，就會走下面的else的程式碼，變成紅色後就要把flag變成true了
            flag = true;
        }
    }
}
 

• 執行：

• 雙擊螢幕點贊：

• 雙擊屏幕後取消點贊：

2. 能否按照抖音的業務去實現呢?

業務分析：

• 雙擊螢幕之後點贊。（上面已實現），再次雙擊螢幕之後，不會取消點贊，只有點選後紅心之後才能取消點贊。
• 單擊紅心也可以點贊，再次單擊紅心就會取消點贊

實現思路：

1. 給最外層的佈局新增雙擊事件，雙擊之後點贊，變成紅色心。 如果已經被點贊，那麼還是修改為紅色心，相當於不做任何處理。
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;

    @Override
    public 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);
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }

    //如果標記為false，表示沒有點贊，此時把白色變為紅色
    //如果標記為true，表示已經點贊，再次雙擊後，會把紅色變回白色

    boolean flag = false;


    @Override
    public void onDoubleClick(Component component) {
        //修改圖片的紅星就可以了，只需要用到image就行了，所以把image定為成員變數

        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            //取消點贊變成白色，也要把flag設定為false
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            //當啟動專案的時候，flag初始值是false，就會走下面的else的程式碼，此時設定為紅色，把flag去掉，再次雙擊後就還是紅色了
        }
    }

    @Override
    public void onClick(Component component) {
        if (flag){
            image.setImageAndDecodeBounds(ResourceTable.Media_white);
            flag = false;
        }else{
            image.setImageAndDecodeBounds(ResourceTable.Media_red);
            flag = true;
        }
    }
}

• 執行：

• 單擊紅心後：

• 再次單擊紅心：

• 雙擊屏幕後效果如下，再次雙擊螢幕就不會取消點讚了，只有點選小紅心才能取消點贊

seo優化關鍵詞是什麼