鸿蒙OS前端开发入门指南——ListContainer教程

目录：
1、布局模板
 2、创建数据提供者实体类并且继承 RecycleItemProvider 实现其方法
 3、RecycleItemProvider是提供数据与组件关联器来的方法
 4、创建数据实体类
 5、创建数据模板
 6、获取listContainer 并且绑定数据模板

当前教程项目地址 https://gitee.com/blueskyliu/...

建议看着代码看我这个解释

提供在屏幕上向上或向下滚动时显示的列表容器。这个类继承自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/

推荐阅读

目录