作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

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

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

一、支持的XML属性

ListContainer的共有XML属性继承自：Component

ListContainer的自有XML属性见下表：

二、ListContainer的使用方法

我们先来说一下思路步骤：

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

1、在xml布局文件中：

<?xml version="1.0" encoding="utf-8"?>br<DirectionalLayoutbr    xmlns:ohos="http://schemas.huawei.com/res/ohos"br    ohos:height="match_parent"br    ohos:width="match_parent"br    ohos:alignment="center"br    ohos:orientation="vertical">brbr    <ListContainerbr        ohos:id="$+id:list_container1"br        ohos:height="200vp"br        ohos:width="300vp"br        ohos:background_element="#eeeeee"br        ohos:layout_alignment="horizontal_center"/>brbr</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>br<DirectionalLayoutbr    xmlns:ohos="http://schemas.huawei.com/res/ohos"br    ohos:height="match_content"br    ohos:width="match_parent"br    ohos:left_margin="16vp"br    ohos:right_margin="16vp"br    ohos:orientation="vertical">br    <Textbr        ohos:id="$+id:item_index"br        ohos:height="match_content"br        ohos:width="match_content"br        ohos:background_element="#33ff00ff"br        ohos:padding="4vp"br        ohos:text="Item0"br        ohos:text_size="20fp"br        ohos:margin="10vp"br        ohos:layout_alignment="center"/>br</DirectionalLayout>

3、在java代码中，com.example.hanrulistcontainer目录下新建一个包：provider

该包下先提供一个java文件：ItemDemo.java，

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

4、ListContainer每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到ListContainer上。

在上面的包下再创建一个Java文件：ItemProvider.java，让它继承自BaseItemProvider。必须重写的方法如下：

示例代码：

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

5、在MainAbilitySlice.java中，添加方法，添加ListContainer的数据，并适配其数据结构。

先添加一个方法，提供数据：

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

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

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

然后别忘了在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的样式设置相关的接口如下：

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

<ListContainer
    ...
    ohos:orientation="horizontal"/>

在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中设置：

<ListContainer
    ...
    ohos:rebound_effect="true"/>

在Java代码中设置：

listContainer.setReboundEffect(true);

回弹效果：

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

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

4、设置着色器颜色。

在xml中设置：

<ListContainer
    ...
    ohos:shader_color="#FFDEAD"/>

在Java代码中设置：

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

设置着色器效果：

五、写个例子

首先看一下效果图：

1、首先在media目录下放置10个小图片：

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <ListContainer
        ohos:id="$+id:list_container2"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#eeeeee"
        ohos:rebound_effect="true"
        ohos:layout_alignment="horizontal_center"/>


</DirectionalLayout>

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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:padding="20vp"
    ohos:margin="10vp"
    ohos:background_element="#11ff0000"
    >
    
    <Image
        ohos:id="$+id:image_icon"
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:image_src="$media:icon"
        ohos:scale_mode="stretch"
        ohos:vertical_center="true"/>

    <Text
        ohos:id="$+id:text_name"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Name"
        ohos:text_size="28fp"
        ohos:text_color="#AA0000"
        ohos:margin="10vp"
        ohos:right_of="$id:image_icon"
        ohos:align_top="$id:image_icon"
        />
    <Text
        ohos:id="$+id:text_note"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Note"
        ohos:text_size="28fp"
        ohos:margin="10vp"
        ohos:text_color="#00AA00"
        ohos:right_of="$id:image_icon"
        ohos:below="$id:text_name"
        />

</DependentLayout>

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 ListItemProvider  extends  BaseItemProvider{

    private List<Map<String,Object>> list;
    private AbilitySlice  slice;

    public ListItemProvider(List<Map<String, Object>> 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<String,Object> 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 SecondAbilitySlice  extends  AbilitySlice{
    @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<Map<String,Object>> list = getData();
        // 3.初始化Provider对象
        ListItemProvider listItemProvider = new ListItemProvider(list,this);
        // 4.适配要展示的内容数据
        listContainer.setItemProvider(listItemProvider);
        // 5.设置每个Item的点击事件
        listContainer.setItemClickedListener((container, component, position, id) -> {
            Map<String,Object> item = (Map<String,Object>) listContainer.getItemProvider().getItem(position);
            new ToastDialog(this)
                    .setText("你点击了:" + item.get("name")+"，"+item.get("note"))
                    // Toast显示在界面中间
                    .setAlignment(LayoutAlignment.CENTER)
                    .show();
        });



    }

    // 初始化数据源
    private List<Map<String,Object>> getData(){
        List<Map<String,Object>> 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<Map<String,Object>>();
        for(int i=0;i<images.length;i++){
            Map<String, Object> map = new HashMap<String, Object>();
            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());
    }

}

然后运行即可。