HarmonyOS實戰—實現相親APP

作者：兮動人 2021-08-26 15:28:05

系統 OpenHarmony

本篇帶給大家運用HarmonyOS打造一款相親APP，愿社區的每一位單身的同志都能通過逛社區找到心儀的對象。

[[419696]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

簡易版相親APP

實現如下效果：

如果喜歡就點擊下面的“聯系方式”，不喜歡就點擊“下一個”

1. 布局實現

新建項目：MakeFriendsApplication

把以下九個girl圖片復制到 media 文件夾下

有需要上面圖片素材的小伙伴可以自取：https://www.aliyundrive.com/s/j59dy5redPR

當然也可以自己在網上找，圖片信息如下：

可以在上面的實現看到布局是由：一個圖片+三個文本+兩個按鈕組成的

布局實現：

<?xml version="1.0" encoding="utf-8"?> 
<DirectionalLayout 
    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:girl1"/> 
 
    <Text 
        ohos:id="$+id:name" 
        ohos:height="50vp" 
        ohos:width="150vp" 
        ohos:text="姓名：王美花" 
        ohos:text_size="20fp"/> 
 
    <Text 
        ohos:id="$+id:age" 
        ohos:height="50vp" 
        ohos:width="150vp" 
        ohos:text="年齡：29" 
        ohos:text_size="20fp"/>  
 
    <Text 
        ohos:id="$+id:address" 
        ohos:height="50vp" 
        ohos:width="150vp" 
        ohos:text="地址：南京" 
        ohos:text_size="20fp"/> 
     
    <Button 
        ohos:id="$+id:next" 
        ohos:height="50vp" 
        ohos:width="150vp" 
        ohos:background_element="#92D050" 
        ohos:text="下一個" 
        ohos:text_size="20fp" 
        ohos:text_color="#FFFFFF"/> 
 
    <Button 
        ohos:id="$+id:get" 
        ohos:height="50vp" 
        ohos:width="150vp" 
        ohos:background_element="#92D050" 
        ohos:text="獲取聯系方式" 
        ohos:text_size="20fp" 
        ohos:text_color="#FFFFFF" 
        ohos:top_margin="10vp"/> 
 
</DirectionalLayout>

運行：

2. 核心業務邏輯實現

先找到組件對象

業務：點擊了按鈕“下一個”就要修改上面的信息，能不能把上面的信息看作成一個整體的對象?

現在有9個相親對象，點擊“下一個”的時候，就會隨機把一個相親對象的信息去顯示在上面。

創建一個Javabean類去描述女朋友信息，有了Javabean類后才能在代碼中創建對象

在domain中新建類名為：GirlFriend，在類中的屬性有哪些?

如：圖片、姓名、地址、年齡都是GirlFriend類中的屬性

在資源管理器中獲取圖片，發現girl圖片是int類型的

所以在JavaBean中GirlFriend類中圖片類型使用int類型

其他屬性使用對應的類型

最后生成標準的JavaBean即可

package com.xdr630.makefriendsapplication.domain; 
 
public class GirlFriend { 
    //照片 
    private int photoID; 
    //姓名 
    private String name; 
    //年齡 
    private int age; 
    //地址 
    private String address; 
 
    //空參 + 全參：alt + insert 
 
    public GirlFriend() { 
    } 
 
    public GirlFriend(int photoID, String name, int age, String address) { 
        this.photoID = photoID; 
        this.name = name; 
        this.age = age; 
        this.address = address; 
    } 
 
    public int getPhotoID() { 
        return photoID; 
    } 
 
    public void setPhotoID(int photoID) { 
        this.photoID = photoID; 
    } 
 
    public String getName() { 
        return name; 
    } 
 
    public void setName(String name) { 
        this.name = name; 
    } 
 
    public int getAge() { 
        return age; 
    } 
 
    public void setAge(int age) { 
        this.age = age; 
    } 
 
    public String getAddress() { 
        return address; 
    } 
 
    public void setAddress(String address) { 
        this.address = address; 
    } 
}

創建好了Javabean，就可以創建一個集合裝9個相親的對象，使用集合來存儲了，ArrayList，泛型就可以直接寫創建好的GirlFriend 類

在以后學習了和服務器交互之后，這些數據都是從服務器獲取的，就不是一個一個添加了

下面就是手動添加數據來源

創建一個女朋友對象(new GirlFriend )并添加到 list 當中

為了方便，省的去查看Javabean中屬性的排序，Ctrl + P 就可以查看參數了

添加完成9個對象

接著給按鈕添加點擊事件，兩個按鈕都要添加，分別是“next”和“get”按鈕

實現本類中點擊事件

當next按鈕被點擊后，就會執行本類中的onClick方法

get 按鈕同上也要添加單擊事件

然后在 onClick 方法中判斷點擊是 next 按鈕或 get 按鈕

因為在 onClick 方法中要用到按鈕的對象，所以把按鈕的對象提升為成員變量才能在onClick方法中被訪問的到，用到哪個就提哪個，這些組件都用的到，所以都提為成員變量。

在下面onClick方法當中，要從集合中獲取girl信息，所以集合也要提為成員變量

Random對象也放在成員位置，表示在程序啟動之后就創建了一個，如果放在onClick方法中，當點擊一次就創建一次，內存冗余。

MainAbilitySlice

package com.xdr630.makefriendsapplication.slice; 
 
import com.xdr630.makefriendsapplication.ResourceTable; 
import com.xdr630.makefriendsapplication.domain.GirlFriend; 
import ohos.aafwk.ability.AbilitySlice; 
import ohos.aafwk.content.Intent; 
import ohos.agp.components.Button; 
import ohos.agp.components.Component; 
import ohos.agp.components.Image; 
import ohos.agp.components.Text; 
 
import java.util.ArrayList; 
import java.util.Random; 
 
public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener { 
 
        Image img; 
        Text name; 
        Text age; 
        Text address; 
        Button next; 
        Button get; 
 
        ArrayList<GirlFriend> list = new ArrayList<>(); 
 
    @Override 
    public void onStart(Intent intent) { 
        super.onStart(intent); 
        super.setUIContent(ResourceTable.Layout_ability_main); 
 
        //1.找到組件對象 
        img = (Image) findComponentById(ResourceTable.Id_img); 
        name = (Text) findComponentById(ResourceTable.Id_name); 
        age = (Text) findComponentById(ResourceTable.Id_age); 
        address = (Text) findComponentById(ResourceTable.Id_address); 
        next = (Button) findComponentById(ResourceTable.Id_next); 
        get = (Button) findComponentById(ResourceTable.Id_get); 
        //2.創建一個集合裝9個相親的對象 
 
 
        //添加9個對象 
        //在以后學習了和服務器交互之后，這些數據都是從服務器獲取的 
        list.add(new GirlFriend(ResourceTable.Media_girl1,"王美花1",29,"南京")); 
        list.add(new GirlFriend(ResourceTable.Media_girl2,"王美花2",30,"上海")); 
        list.add(new GirlFriend(ResourceTable.Media_girl3,"王美花3",31,"武漢")); 
        list.add(new GirlFriend(ResourceTable.Media_girl4,"王美花4",28,"長沙")); 
        list.add(new GirlFriend(ResourceTable.Media_girl5,"王美花5",25,"南昌")); 
        list.add(new GirlFriend(ResourceTable.Media_girl6,"王美花6",26,"杭州")); 
        list.add(new GirlFriend(ResourceTable.Media_girl7,"王美花7",23,"深圳")); 
        list.add(new GirlFriend(ResourceTable.Media_girl8,"王美花8",22,"北京")); 
        list.add(new GirlFriend(ResourceTable.Media_girl9,"王美花9",24,"廣州")); 
 
        //3.給按鈕添加點擊事件 
        next.setClickedListener(this); 
        get.setClickedListener(this); 
 
    } 
 
    @Override 
    public void onActive() { 
        super.onActive(); 
    } 
 
    @Override 
    public void onForeground(Intent intent) { 
        super.onForeground(intent); 
    } 
 
    Random r =  new Random(); 
 
    @Override 
    public void onClick(Component component) { 
        if (component == next){ 
            //點擊的是下一個 --- 換一個girl的信息 
            //從集合中獲取一個隨機的girl的信息 
 
            //獲取一個隨機索引 
            int randomIndex = r.nextInt(list.size()); 
            //通過隨機索引獲取隨機girl信息 
            GirlFriend girlFriend = list.get(randomIndex); 
            //把隨機出來的信息設置到界面當中 
            img.setImageAndDecodeBounds(girlFriend.getPhotoID()); 
            name.setText("姓名：" + girlFriend.getName()); 
            age.setText("年齡：" + girlFriend.getAge()); 
            address.setText("地址：" + girlFriend.getAddress()); 
 
 
        }else if (component == get){ 
            //獲取聯系方式 
            //擴展：可以跳轉到界面讓用戶充值界面，充值后才能看到girl信息 
        } 
    } 
}