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
好吧 我是笨比 我找到解决办法了
其实这个功能完全可以用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)来完成。以下是具体实现方法:
-
创建自定义组件:
- 在项目的
resources/base/res
目录下,新建一个element
目录(如果不存在)。 - 在
element
目录中创建一个XML文件,定义你希望复用的组件结构和样式。
- 在项目的
-
定义组件属性:
- 在XML文件中,可以通过
<property>
标签定义组件的属性,这些属性在引用自定义组件时可以动态设置。
- 在XML文件中,可以通过
-
引用自定义组件:
- 在其他页面的XML布局文件中,通过
<element>
标签引用自定义组件,并设置相应的属性。
- 在其他页面的XML布局文件中,通过
-
使用Java或JS代码处理逻辑(注意,这里不涉及Java或C语言代码的具体实现,但你需要确保在逻辑层正确处理自定义组件的交互):
- 自定义组件的交互逻辑可以通过页面或Ability的Java或JS代码来处理。
-
编译并运行:
- 编译项目,确保自定义组件被正确识别和引用。
- 运行应用,检查自定义组件的复用效果。
如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html,