4.3【HarmonyOS鸿蒙开发】组件ListContainer(上)

作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家

ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。

MVC的设计模式 m：model：数据模型 data：数组，集合，。。。 V：view：视图 ListContainer c：control：控制器 Provider

一、支持的XML属性
ListContainer的共有XML属性继承自：Component
ListContainer的自有XML属性见下表：

属性名称	中文描述	取值	取值说明	使用案例
rebound_effect	开启/关闭回弹效果	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:rebound_effect=“true" ohos:rebound_effect=”$boolean:true"
shader_color	着色器颜色	color类型	可以直接设置色值，也可以引用color资源。	ohos:shader_color="#A8FFFFFF" ohos:shader_color="$color:black"
orientation	列表项排列方向	horizontal	表示水平方向列表。	ohos:orientation=“horizontal”
		vertical	表示垂直方向列表。	ohos:orientation=“vertical”

二、ListContainer的使用方法
我们先来说一下思路步骤：

使用ListContainer step1：先xml布局：控件ListContainer step2：对应的AbilitySlice中找到控件 step3：设置数据源 List，Array，Map等 step4：创建Provider 自定义类，继承BaseItemProvider，重写4个必要的方法。 step5：设置Provider，适配数据 step6：添加监听 OnItemClickListener

1、在xml布局文件中：

2、在layout目录下，新建每个item的布局文件：list_item_demo1.xml

3、在java代码中，com.example.hanrulistcontainer目录下新建一个包：provider
该包下先提供一个java文件：ItemDemo.java，

package com.example.hanrulistcontainer.provider; /** * ListContainer中的每一个Item */ public class ItemDemo { private String name; public ItemDemo(String name) { this.name = name; } public String getName() { return name; } public void setName(String name) { this.name = name; } }

4、ListContainer每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到ListContainer上。
在上面的包下再创建一个Java文件：ItemProvider.java，让它继承自BaseItemProvider。必须重写的方法如下：

方法	作用
int getCount()	返回填充的表项个数。
Object getItem(int position)	根据position返回对应的数据。
long getItemId(int position)	返回某一项的id。
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer)	根据position返回对应的界面组件。

示例代码：

package com.example.hanrulistcontainer.provider; import com.example.hanrulistcontainer.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.agp.components.*; import java.util.List; /** * 使用BaseItemProvider *1.继承 BaseItemProvider * *2.重写必要的方法：4个 *getCount()===获取数据的总量， 也就是要绘制的总数。一般是数据源的长度。 *getItem(int position)===根据position，要绘制的位置，返回对应的数据。 *getItemId(int position)===根据position位置，获取要绘制的条目的id，其实就是position。 *getComponent(int position, Component component, ComponentContainer componentContainer) ===position，绘制每一个item。其实就是获取component。 * * *A：先创建一个item每一个条目对应的xml布局。 *B：使用LayoutScatter，用途是将xml布局，转为Component对象。 *C：在Component上获取控件：view.findViewById()--控件 *D：根据position 获取数据源中对应的数据。然后设置到对应的控件上。 *E：返回该Component对象。 */ // step1：继承BaseItemProvider public class ItemProvider extends BaseItemProvider { // 提供数据源 private List list; private AbilitySlice slice ; // 构造方法 public ItemProvider(List list, AbilitySlice slice) { this.list = list; this.slice = slice; }//step2：重写4个必要的方法/** * getCount()，数据源中有多少条数据，表示要绘制的item的数量。 * * @return 一般是返回数据源的长度。 */ @Override public int getCount() { return list == null?0: list.size(); //一般返回数据源的长度 }/** * 根据position的位置，获取数据源中的数据对象 * * @param position，要绘制的是第几个条目 * @return，该条目中要展示的数据对象 */ @Override public Object getItem(int position) { if(list!= null && position >= 0 && position < list.size()){ return list.get(position); } return null; }/** * 根据 position 的位置，获取指定id * @param position * @return */ @Override public long getItemId(int position) { return position; }/** * * 用于绘制每一个item。返回值就是绘制好的Component对象。 * * @param position 第一个参数, 要绘制的item的位置。 * @param convertComponent 第二个参数，被复用的Component * @param componentContainer 第三个参数，指listContainer本身。 * @return */ @Override public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { final Component cpt; // 如果还没有convertComponent对象，那么将xml布局文件转为一个Component对象。 if(convertComponent == null){ //从当前的AbilitySlice对应的xml布局中， cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_list_item_demo1,null,false); }else{ cpt = convertComponent; } ItemDemoitem=list.get(position); //获取数据 Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index); text.setText(item.getName()); return cpt; } }

5、在MainAbilitySlice.java中，添加方法，添加ListContainer的数据，并适配其数据结构。
先添加一个方法，提供数据：

// 初始化数据源 private List getData(){ List list = new ArrayList<>(); for(int i=0; i<=8; i++){ list.add(new ItemDemo("Item "+i)); } return list; }

再提供一个方法，初始化ListContainer，并适配其数据结构。

// 初始化ListContainer private void initListContainer(){ // 1.获取xml布局中的ListContainer组件 ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container1); // 2.实例化数据源 List list = getData(); // 3.初始化Provider对象 ItemProvider itemProvider = new ItemProvider(list, this); // 4.适配要展示的内容数据 listContainer.setItemProvider(itemProvider); }

然后别忘了在onStart()方法中调用它：

@Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); // 调用 initListContainer(); }

到此我们就可以运行了：
三、ListContainer的常用接口
1、设置响应点击事件。

public interface ItemClickedListener { void onItemClicked(ListContainer container, Component component, int position, long id); } 说明： 第一个参数：ListContainer container，指的就是当前的ListContainer 第二个参数：Component component，每一个Item对应的Component。被点击id条目的component 第三个参数：int position，被点击的条目的位置，从0开始 第四个参数：long id，被点击的条目的id，从0开始

示例代码：

// 4.适配要展示的内容数据 listContainer.setItemProvider(itemProvider); // 5.设置每个Item的点击事件 /** * public interface ItemClickedListener { *void onItemClicked(ListContainer container, Component component, int position, long id); * *} *第一个参数：ListContainer container，指的就是当前的ListContainer * *第二个参数：Component component，每一个Item对应的Component。被点击id条目的component * *第三个参数：int position，被点击的条目的位置，从0开始 * *第四个参数：long id，被点击的条目的id，从0开始 */ listContainer.setItemClickedListener((container, component, position, id) -> { ItemDemo item = (ItemDemo) listContainer.getItemProvider().getItem(position); new ToastDialog(this) .setText("你点击了:" + item.getName()) // Toast显示在界面中间 .setAlignment(LayoutAlignment.CENTER) .show(); });

响应点击事件效果：

文章图片
2、设置响应长按事件。

public interface ItemLongClickedListener { boolean onItemLongClicked(ListContainer container, Component component, int position, long id); } 说明： 该函数的返回值： true，处理。 既绑定单击事件，又长按事件 true，处理了。事件不向下分发。 false，不处理。涉及到事件分发。

java中设置listContainer的长按事件：

//长按事件 /** * public interface ItemLongClickedListener { *boolean onItemLongClicked(ListContainer container, Component component, int position, long id); *} *该函数的返回值： *true，处理。 *既绑定单击事件，又长按事件 *true，处理了。事件不向下分发。 *false，不处理。涉及到事件分发。 */ listContainer.setItemLongClickedListener((container, component, position, id) -> { ItemDemo item = (ItemDemo) listContainer.getItemProvider().getItem(position); new ToastDialog(this) .setText("你长按了:" + item.getName()) .setAlignment(LayoutAlignment.CENTER) .show(); return false; });

响应长按事件效果：

文章图片
四、ListContainer的样式设置
ListContainer的样式设置相关的接口如下：

属性	Java方法	作用
orientation	setOrientation(int orientation)	设置布局方向
-	setContentStartOffSet(int startOffset) setContentEndOffSet(int endOffset) setContentOffSet(int startOffset, int endOffset)	设置列表容器的开始和结束偏移量
rebound_effect	setReboundEffect(boolean enabled)	设置是否启用回弹效果
-	setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) setReboundEffectParams(ListContainer.ReboundEffectParams reboundEffectParams)	设置回弹效果参数
shader_color	setShaderColor(Color color)	设置着色器颜色

1、设置ListContainer的布局方向：orientation设置为“horizontal”，表示横向布局；orientation设置为“vertical”，表示纵向布局。默认为纵向布局。

在Java代码中设置：

listContainer.setOrientation(Component.HORIZONTAL);

效果如下：

文章图片
2、设置ListContainer的开始和结束偏移量。

listContainer.setContentOffSet(200,100);

java中的代码：

// 初始化ListContainer private void initListContainer(){ // 1.获取xml布局中的ListContainer组件 ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container1); // 设置起始和结束位置的偏移量 listContainer.setContentOffSet(200,100); // 2.实例化数据源 ...}

设置列表容器的开始偏移量为100，结束偏移量为100，示例效果：
3、设置回弹效果。
在xml中设置：

在Java代码中设置：

listContainer.setReboundEffect(true);

回弹效果：

文章图片
在开启回弹效果后，可以调用setReboundEffectParams()方法调整回弹效果。

/* *setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) */ listContainer.setReboundEffectParams(40, 0.6f, 20);

4、设置着色器颜色。
在xml中设置：

在Java代码中设置：

listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));

设置着色器效果：

文章图片
五、写个例子
首先看一下效果图：
1、首先在media目录下放置10个小图片：

文章图片

2、在layout目录下，新建一个布局文件：list_container_layout.xml

在这里我们放置了一个ListContainer，然后我们继续创建xml布局文件，用来表示每个item的布局，list_item_demo2.xml

2、然后我们在provider包下新建一个Provider：ListItemProvider.java文件：

package com.example.hanrulistcontainer.provider; import com.example.hanrulistcontainer.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.agp.components.*; import java.util.List; import java.util.Map; public class ListItemProviderextendsBaseItemProvider{private List> list; private AbilitySliceslice; public ListItemProvider(List> list, AbilitySlice slice) { this.list = list; this.slice = slice; }@Override public int getCount() { return list == null?0: list.size(); //一般返回数据源的长度 }@Override public Object getItem(int position) { if(list!= null && position >= 0 && position < list.size()){ return list.get(position); } return null; }@Override public long getItemId(int position) { return position; }@Override public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) { final Component cpt; // 如果还没有convertComponent对象，那么将xml布局文件转为一个Component对象。 if(convertComponent == null){ //从当前的AbilitySlice对应的xml布局中， cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_list_item_demo2,null,false); }else{ cpt = convertComponent; } Map map =list.get(position); //获取数据 Text textName = (Text) cpt.findComponentById(ResourceTable.Id_text_name); Text textNote = (Text) cpt.findComponentById(ResourceTable.Id_text_note); Image image =(Image) cpt.findComponentById(ResourceTable.Id_image_icon); textName.setText((String)map.get("name")); textNote.setText((String)map.get("note")); image.setPixelMap((int)map.get("image")); return cpt; } }

3、slice包下新建一个AbilitySlice文件：SecondAbilitySlice.java

package com.example.hanrulistcontainer.slice; import com.example.hanrulistcontainer.ResourceTable; import com.example.hanrulistcontainer.provider.ListItemProvider; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.ListContainer; import ohos.agp.utils.LayoutAlignment; import ohos.agp.window.dialog.ToastDialog; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; public class SecondAbilitySliceextendsAbilitySlice{ @Override protected void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_list_container_layout); initListContainer(); }// 初始化ListContainer private void initListContainer(){ // 1.获取xml布局中的ListContainer组件 ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container2); // 2.实例化数据源 List> list = getData(); // 3.初始化Provider对象 ListItemProvider listItemProvider = new ListItemProvider(list,this); // 4.适配要展示的内容数据 listContainer.setItemProvider(listItemProvider); // 5.设置每个Item的点击事件 listContainer.setItemClickedListener((container, component, position, id) -> { Map item = (Map) listContainer.getItemProvider().getItem(position); new ToastDialog(this) .setText("你点击了:" + item.get("name")+"，"+item.get("note")) // Toast显示在界面中间 .setAlignment(LayoutAlignment.CENTER) .show(); }); }// 初始化数据源 private List> getData(){ List> list = new ArrayList<>(); // icon图标 int[] images = {ResourceTable.Media_image_info1,ResourceTable.Media_image_info2, ResourceTable.Media_image_info3,ResourceTable.Media_image_info4, ResourceTable.Media_image_info5,ResourceTable.Media_image_info6, ResourceTable.Media_image_info7,ResourceTable.Media_image_info8, ResourceTable.Media_image_info9,ResourceTable.Media_image_info10}; String[] names={"曹操","刘备","关羽","诸葛亮","小乔","貂蝉","吕布","赵云","黄盖","周瑜"}; String[] notes={"一代枭雄","卖草鞋","财神","卧龙先生","周瑜媳妇","四大镁铝","天下无双","常胜将军","愿意挨打","愿意打人"}; list= new ArrayList>(); for(int i=0; i map = new HashMap(); map.put("image", images[i]); map.put("name", names[i]); map.put("note", notes[i]); list.add(map); }return list; } }

思路和之前讲原理的时候一样，这里我就不再赘述了。但是数据源的类型我换了一下，之前讲原理的时候使用的是自定义类ItemDemo，这里我直接使用了Map。
4、修改一下程序的入口：

public class MainAbility extends Ability { @Override public void onStart(Intent intent) { super.onStart(intent); //super.setMainRoute(MainAbilitySlice.class.getName()); super.setMainRoute(SecondAbilitySlice.class.getName()); }}

然后运行即可。
更多内容：
1、社区：鸿蒙巴士https://www.harmonybus.net/
2、公众号：HarmonyBus
3、技术交流QQ群：714518656
【4.3【HarmonyOS鸿蒙开发】组件ListContainer(上)】4、视频课：https://www.chengxuka.com

推荐阅读

• 

  爱普生打印机废墨怎么排除
• 

  hdr|iQOO9 Pro 影像体验：首发三星 GN5，定格精彩瞬间
• 

  鲷鱼是海鱼吗
• 

  盒马鲜生怎么样 盒马鲜生会员有什么优惠好处
• 

  焦作山药什么时候才恢复种植，河南焦作山药种植基地
• 

  公积金贷款买房要求是什么 公积金贷款买房有哪些要求
• 

  日常|双11剁手指南，iPhone12全系列最强降价
• 

  刺心小句子 十句话让你伤痛欲绝
• 

  申请著名商标理由 著名商标在哪里申请，浙江著名商标申请
• 

  河南养老保险怎么网上缴费？要交多少年
• 

  景泰蓝工艺是什么
• 

  有哪些悬疑破案或者恐怖类电视剧推荐？
• 

  游戏《地下城与勇士》搬砖还有前景吗？
• 

  14岁女孩迟迟不发育 染色体反省竟是男孩？
• 

  w5000显卡相当于哪个型号
• 

  三九灸和三伏灸有什么区别
• 

  摩天轮象征什么意义 摩天轮象征的意义介绍
• 

  价值工程中的价值
• 

  菠萝放久了还可以吃吗
• 

  怎样种果树成活率高 果树怎么种成活率比较高

• Python计算字符串中子字符串数量的三种方法（findall、finditer和startswith）
• PHP Ds Vector count（）函数用法介绍
• JavaScript面向对象的程序设计及原型链的理解运用全解【重点】
• 垂死之光2在哪里（）
• 《神秘海域》电影已完成拍摄，首先看马克·沃尔伯格的S谐服装
• C语言遍历数组的两种方式
• 英雄传说（北美公布冷钢之路IV）
• Python中的元类是什么（如何理解？有什么作用？如何使用元类？）
• Leetcode|LeetCode 反转链表-C++
• 不明白Python的切片符号，如何更好地理解Python的切片（）