关于harmonyos:43HarmonyOS鸿蒙开发组件ListContainer上

作者：韩茹

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

鸿蒙巴士专栏作家

ListContainer 是用来出现间断、多行数据的组件，蕴含一系列雷同类型的列表项。

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

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
    step1：先 xml 布局：控件 ListContainer
    step2：对应的 AbilitySlice 中找到控件
    step3：设置数据源
        List，Array，Map 等
    step4：创立 Provider
        自定义类，继承 BaseItemProvider，重写 4 个必要的办法。step5：设置 Provider，适配数据
    step6：增加监听
        OnItemClickListener

1、在 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:alignment="center"
    ohos:orientation="vertical">

    <ListContainer
        ohos:id="$+id:list_container1"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:background_element="#eeeeee"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

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

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

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<ItemDemo> list;
    private AbilitySlice slice ;

    // 构造方法
    public ItemProvider(List<ItemDemo> 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;}
        ItemDemo  item=list.get(position);// 获取数据
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
        text.setText(item.getName());
        return cpt;
    }
}

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

先增加一个办法，提供数据：

        // 初始化数据源
    private List<ItemDemo> getData(){List<ItemDemo> 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<ItemDemo> 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();}

到此咱们就能够运行了：

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 的款式设置相干的接口如下：

属性	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”，示意纵向布局。默认为纵向布局。

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

}

而后运行即可。

关于harmonyos:43HarmonyOS鸿蒙开发组件ListContainer上

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

一、反对的 XML 属性

二、ListContainer 的应用办法

三、ListContainer 的罕用接口

四、ListContainer 的款式设置

五、写个例子