鸿蒙OS前端开发入门指南——ListContainer教程
目录：
1、布局模板
2、创建数据提供者实体类并且继承 RecycleItemProvider 实现其方法
3、RecycleItemProvider是提供数据与组件关联器来的方法
4、创建数据实体类
5、创建数据模板
6、获取listContainer 并且绑定数据模板
当前教程项目地址 https://gitee.com/blueskyliu/hongmeng-os-actual-combat.git
建议看着代码看我这个解释
提供在屏幕上向上或向下滚动时显示的列表容器。这个类继承自ComponentContainer。它使用BaseItemProvider或RecycleItemProvider来存储对象
根据上面的定义我们得知 ListContainer 是列表容器，用来渲染重复性布局的容器
渲染条件
1.布局模板
官方推荐使用xml来写布局这里我们也用的是xml写模板布局
<?xml version="1.0" encoding="utf-8" ?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:dynamicitem"
ohos:height="match_content"
ohos:width="match_parent"
>
<!-- 第一层-->
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal"
>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal"
>
<Image
ohos:height="40vp"
ohos:width="40vp"
ohos:image_src="$media:log.png"
ohos:scale_mode="stretch"
></Image>
<DirectionalLayout
ohos:width="match_parent"
ohos:height="match_content"
>
<Text
ohos:text_size="19fp"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_color="#FFFFFF"
ohos:text="蓝天的测试"
ohos:id="$+id:authname"
ohos:scale_mode="stretch"
></Text>
<DirectionalLayout
ohos:orientation="horizontal"
ohos:width="match_content"
ohos:height="match_content"
>
<Image
ohos:height="10vp"
ohos:width="10vp"
ohos:image_src="$media:log.png"
ohos:scale_mode="stretch"
></Image>
<Text
ohos:text_size="19fp"
ohos:width="match_content"
ohos:height="match_content"
ohos:text_color="#FFFFFF"
ohos:text="郑州市金水区"
></Text>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
</DirectionalLayout>
-
创建数据提供者实体类并且继承 RecycleItemProvider 实现其方法
提供一个RecycleItemProvider对象，以将ComponentProvider项与组件的基本数据关联起来。回收器适配器扩展了BaseItemProvider。数据集中的每个组件项都可以使用它来释放内存资源。
-
根据上面的定义我们得知 RecycleItemProvider是提供数据与组件关联器来的方法
package com.example.myapplication2048.itemprovider;
import com.example.myapplication2048.ResourceTable;
import com.example.myapplication2048.datamodel.DynamicItemInfo;
import ohos.agp.components.*;
import ohos.app.AbilityContext;
import ohos.app.Context;
import java.util.List;
public class DynamicProvider extends RecycleItemProvider {
/**
* 卡片盒子模型
*/
private List<DynamicItemInfo> dynamicModels;
/**
* 应用程序可以使用AbilityContext来获取资源、启动能力、
* 创建或获取线程模型，以及获取应用程序包信息和运行信息。
* 一个能力就是ability context的一个实例。
* 总之只要操作就需要getcontext 因为他需要这个环境 就好比人对水的需求 盖房子 做饭 都需要水一样
*/
public DynamicProvider(List<DynamicItemInfo> dynamicModels) {
this.dynamicModels = dynamicModels;
}
/**
* ：
* @return获取提供程序中数据项的总数
*/
@Override
public int getCount() {
return dynamicModels.size();
}
/**
* ：
* @return获取位于数据集中指定位置的数据项。
*/
@Override
public DynamicItemInfo getItem(int i) {
return dynamicModels.get(i);
}
/**
* ：
* @return 获取数据集中指定位置的数据项的行ID。
*/
@Override
public long getItemId(int i) {
return i;
}
/**
* 获取在数据集中指定位置显示数据的组件。
* @param i 指示组件在数据集中的位置。
* @param component 表示前一个需要重用的组件。如果没有这样的组件，这个参数可以为空。
* @param componentContainer 匹配要获取组件的父组件。
* @return
*/
@Override
public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
Component parse = component; //默认 component ==null 第一次的时候
/**
* LayoutScatter
* 您可以使用该工具在XML文件中定义一个组件，
* 然后调用parse(int, ohos.agp.components.ComponentContainer, boolean)
* 方法来使用该文件生成一个组件对象。
* parse 公共组件解析(int xmlId, ComponentContainer根，boolean attachToRoot)
* 将XML文件转换为组件。
*
*/
/**
* parse
* 参数1 组件id
* 参数2 跟组件 就是当前容器 父组件。
*/
Dynamicitem dynamicitem;//初始化
if (parse==null){
//获取上下文 这里获取的是父组件 就是 ListContainer 上下文
Context context = componentContainer.getContext();
//获取xml 布局模板
parse = LayoutScatter.getInstance(context)
.parse(ResourceTable.Layout_dynamicitem, componentContainer, false);
//指明给哪个模板容器添加数据
dynamicitem = new Dynamicitem(parse);
parse.setTag(dynamicitem);//将布局模板写入缓存 下次调用使用 不用重复查询模板
}else {
//第二次进来有缓存
dynamicitem =(Dynamicitem) parse.getTag();
}
//给布局模板里面的组件添加数据
dynamicitem.textAUTH.setText(dynamicModels.get(i).getAuthor());
//绑定完成 返回当前模板
return parse;
}
/**
* 动态卡片容器
*/
public static class Dynamicitem {
Text textAUTH;//初始化组件
Dynamicitem(Component itemComponent){
//获取模板里面的 组件
textAUTH = (Text) itemComponent.findComponentById(ResourceTable.Id_authname);
}
}
}
- 创建数据实体类
package com.example.myapplication2048.datamodel;
/**
* 动态数据模型
*/
public class DynamicItemInfo {
// true 关注 false 没关注
private boolean isFocusOn;
//用户名
private String author;
//用户头像
private String authorImgUrl;
//创建时间
private Long create_date;
// true 点赞 false 没点赞
private boolean isPraise;
//点赞数量
private Integer praiseNum;
//评论数量
private Integer commentsNum;
//热度数量
private Integer hotNum;
public DynamicItemInfo(boolean isFocusOn, String author, String authorImgUrl, Long create_date, boolean isPraise, Integer praiseNum, Integer commentsNum, Integer hotNum) {
this.isFocusOn = isFocusOn;
this.author = author;
this.authorImgUrl = authorImgUrl;
this.create_date = create_date;
this.isPraise = isPraise;
this.praiseNum = praiseNum;
this.commentsNum = commentsNum;
this.hotNum = hotNum;
}
@Override
public String toString() {
return "dynamicModel{" +
"isFocusOn=" + isFocusOn +
", author='" + author + '\'' +
", authorImgUrl='" + authorImgUrl + '\'' +
", create_date=" + create_date +
", isPraise=" + isPraise +
", praiseNum=" + praiseNum +
", commentsNum=" + commentsNum +
", hotNum=" + hotNum +
'}';
}
public boolean isFocusOn() {
return isFocusOn;
}
public void setFocusOn(boolean focusOn) {
isFocusOn = focusOn;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public String getAuthorImgUrl() {
return authorImgUrl;
}
public void setAuthorImgUrl(String authorImgUrl) {
this.authorImgUrl = authorImgUrl;
}
public Long getCreate_date() {
return create_date;
}
public void setCreate_date(Long create_date) {
this.create_date = create_date;
}
public boolean isPraise() {
return isPraise;
}
public void setPraise(boolean praise) {
isPraise = praise;
}
public Integer getPraiseNum() {
return praiseNum;
}
public void setPraiseNum(Integer praiseNum) {
this.praiseNum = praiseNum;
}
public Integer getCommentsNum() {
return commentsNum;
}
public void setCommentsNum(Integer commentsNum) {
this.commentsNum = commentsNum;
}
public Integer getHotNum() {
return hotNum;
}
public void setHotNum(Integer hotNum) {
this.hotNum = hotNum;
}
}
- 创建数据模板
package com.example.myapplication2048.datamodel;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.IntStream;
public class DynamicViewModel {
private List<DynamicItemInfo> dataItemList = new ArrayList<>();
public DynamicViewModel() {
IntStream.range(0,2)
.forEach(index->dataItemList.add(
new DynamicItemInfo(false,"蓝天","adfa",123123L ,true,12,12,2)));
}
public List<DynamicItemInfo> getDataItemList() {
return dataItemList;
}
}
-
获取listContainer 并且绑定数据模板
本案例这串代码需要写在 MainAbilitySlice 生命周期的 onStart 在子页面刚加载的时候调用即可
//获取listContainer
ListContainer listContainerDynamic =(ListContainer) findComponentById(ResourceTable.Id_list_container);
//实例化数据模板
DynamicViewModel viewModel = new DynamicViewModel();
//获取模板数组
List<DynamicItemInfo> dataItemList = viewModel.getDataItemList();
//模板数组传入数据提供者实体类
DynamicProvider dynamicProvider = new DynamicProvider(dataItemList);
//将数据提供者与listContaienr 绑定
listContainerDynamic.setItemProvider(dynamicProvider);
作者：BLUESKYHOST
想了解更多内容，请访问51CTO和华为合作共建的鸿蒙社区：https://harmonyos.51cto.com/
