ListContainer教程

﹏ヽ暗。殇╰゛Y 2023-01-01 10:59 119阅读 0赞

主文档地址 [https://blog.csdn.net/BLUESKYHOST/article/details/111411001][https_blog.csdn.net_BLUESKYHOST_article_details_111411001]

# ListContainer #

当前教程项目地址 [https://gitee.com/blueskyliu/hongmeng-os-actual-combat.git][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>

1.  创建数据提供者实体类并且继承 **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);
            }
    
    
        }
    }

1.  创建数据实体类

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;
        }
    }

1.  创建数据模板

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;
        }
    }

1.  获取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);

[https_blog.csdn.net_BLUESKYHOST_article_details_111411001]: https://blog.csdn.net/BLUESKYHOST/article/details/111411001
[https_gitee.com_blueskyliu_hongmeng-os-actual-combat.git]: https://gitee.com/blueskyliu/hongmeng-os-actual-combat.git