HarmonyOS 鸿蒙Next如何实现xml组件的复用?

HarmonyOS 鸿蒙Next如何实现xml组件的复用? 本人刚开始学习鸿蒙开发(用于制作课设),也没有安卓开发与项目经验,想要了解鸿蒙如何实现xml布局的复用。

例如我现在正在开发的一个新闻客户端,在查看类似app后

(新闻app收藏页面)

想要实现可以通过用户收藏数量来复用组件的功能,但是不知道如何解决

(布局粗糙,请见谅)

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <DirectionalLayout
        ohos:id="$+id:collection_back_click"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_ability_comment"
        ohos:orientation="vertical">
        <Text
            ohos:id="$+id:collection_text_back"
            ohos:height="match_content"
            ohos:width="100vp"
            ohos:text=">"
            ohos:text_size="20vp"
            ohos:weight="2"/>
        <Image
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:image_src="#cccccc"/>
    </DirectionalLayout>
    <com.yan.zrefreshview.ZRefreshView
        ohos:height="match_content"
        ohos:width="match_parent">
        <DirectionalLayout
            ohos:height="101vp"
            ohos:width="match_parent"
            ohos:orientation="vertical">
            <DirectionalLayout
                ohos:height="100vp"
                ohos:width="match_parent"
                ohos:orientation="horizontal">
                <Text
                    ohos:id="$+id:text_collection"
                    ohos:height="100vp"
                    ohos:width="match_content"
                    ohos:background_element="$graphic:background_ability_comment"
                    ohos:multiple_lines="true"
                    ohos:text="$string:commentability_HelloWorld"
                    ohos:text_size="20vp"
                    ohos:weight="2"/>
                <Image
                    ohos:height="match_parent"
                    ohos:width="match_content"
                    ohos:image_src="$media:icon"
                    ohos:left_margin="10vp"
                    ohos:scale_mode="stretch"
                    ohos:weight="1"/>
            </DirectionalLayout>
            <Image
                ohos:height="1vp"
                ohos:width="match_parent"
                ohos:image_src="#cccccc"/>
        </DirectionalLayout>
    </com.yan.zrefreshview.ZRefreshView>
</DirectionalLayout>

(此为该收藏页面的xml布局)

此为用户收藏界面的abilitySlice

第一次使用开发者论坛,排版不好请见谅


更多关于HarmonyOS 鸿蒙Next如何实现xml组件的复用?的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

好吧 我是笨比 我找到解决办法了

其实这个功能完全可以用listContainer来实现

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent">
    <DirectionalLayout
        ohos:id="$+id:collection_back_click"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="$graphic:background_ability_comment"
        ohos:orientation="vertical">
        <Text
            ohos:id="$+id:collection_text_back"
            ohos:height="match_content"
            ohos:width="100vp"
            ohos:text=">"
            ohos:text_size="20vp"
            ohos:weight="2"/>
        <Image
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:image_src="#cccccc"/>
    </DirectionalLayout>
    <ListContainer
        ohos:id="$+id:listcontainer"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>

(此为使用listcontainer的新闻收藏布局)

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <DirectionalLayout
        ohos:id="$+id:collection_component"
        ohos:height="101vp"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <DirectionalLayout
            ohos:height="100vp"
            ohos:width="match_parent"
            ohos:orientation="horizontal">
            <DirectionalLayout
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:orientation="vertical"
                ohos:weight="2">
                <Text
                    ohos:id="$+id:text_collection_title"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:background_element="$graphic:background_ability_comment"
                    ohos:multiple_lines="true"
                    ohos:text="$string:commentability_HelloWorld"
                    ohos:text_size="20vp"
                    ohos:weight="3"/>
                <Text
                    ohos:id="$+id:text_collection_type"
                    ohos:height="match_content"
                    ohos:width="match_content"
                    ohos:background_element="$graphic:background_ability_comment"
                    ohos:multiple_lines="true"
                    ohos:text="$string:commentability_HelloWorld"
                    ohos:text_size="20vp"
                    ohos:weight="1"/>
            </DirectionalLayout>
            <Image
                ohos:height="match_parent"
                ohos:width="match_content"
                ohos:image_src="$media:icon"
                ohos:left_margin="10vp"
                ohos:scale_mode="stretch"
                ohos:weight="1"/>
        </DirectionalLayout>
        <Image
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:image_src="#cccccc"/>
    </DirectionalLayout>
</DirectionalLayout>

(此为listcontainer的自定义组件布局)

package com.example.newsproject.slice;

import com.example.newsproject.Provider.CollectionItemProvider;
import com.example.newsproject.ResourceTable;
import com.example.newsproject.StringParse.PlatformList;
import com.example.newsproject.bean.NewsCollectionBean;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.ListContainer;
import ohos.agp.components.Text;
import java.util.ArrayList;

public class CollectionAbilitySlice extends AbilitySlice {
    ListContainer listContainer;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_collection);

        //从另一个页面获取的用户收藏数据
        String result = intent.getStringParam("loginJSON");
        //自己封装的方法,用于处理json字符串
        PlatformList<NewsCollectionBean> newsList = new PlatformList<>();
        //将json数据解析为对象集合
        ArrayList<NewsCollectionBean> resultList = newsList.getPlatformList(result, NewsCollectionBean.class);
        //绑定ListContainer
        listContainer = (ListContainer) findComponentById(ResourceTable.Id_listcontainer);
        //创建一个Item管理对象(适配器对象)
        CollectionItemProvider collectionProvider = new CollectionItemProvider(resultList, this);
        //将适配器绑定listContainer
        listContainer.setItemProvider(collectionProvider);
    }

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

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

(此为实现了listcontainer组件的新闻收藏Slice类)

我是真没想到原来可以使用listcontainer,算是我学艺不精吧,下次遇到类似的问题的时候一定要发散思维来寻找解决办法,我在百度搜了一下午应该如何解决,我是真没想到看了别人的教学视频让人恍然大悟,算是给自己一个教训吧,下次一定要用效率更高的办法来解决这种这样的问题。

更多关于HarmonyOS 鸿蒙Next如何实现xml组件的复用?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS鸿蒙系统中,实现XML组件的复用主要通过自定义组件(Custom Component)来完成。以下是具体实现方法:

  1. 创建自定义组件:

    • 在项目的resources/base/res目录下,新建一个element目录(如果不存在)。
    • element目录中创建一个XML文件,定义你希望复用的组件结构和样式。
  2. 定义组件属性:

    • 在XML文件中,可以通过<property>标签定义组件的属性,这些属性在引用自定义组件时可以动态设置。
  3. 引用自定义组件:

    • 在其他页面的XML布局文件中,通过<element>标签引用自定义组件,并设置相应的属性。
  4. 使用Java或JS代码处理逻辑(注意,这里不涉及Java或C语言代码的具体实现,但你需要确保在逻辑层正确处理自定义组件的交互):

    • 自定义组件的交互逻辑可以通过页面或Ability的Java或JS代码来处理。
  5. 编译并运行:

    • 编译项目,确保自定义组件被正确识别和引用。
    • 运行应用,检查自定义组件的复用效果。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部