【鸿蒙 HarmonyOS】UI 组件 ( 列表 ListContainer 组件 )

一、布局中设置列表 ListContainer 组件

---

给定一个数据源 , 数组或集合 , 将数据源中的每一项展示到列表中 ;

布局文件中的列表配置 :

<?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">

    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Hello World"
        ohos:text_size="50"
    />

    <ListContainer
        ohos:id="$+id:listContainer"
        ohos:height="match_content"
        ohos:width="match_parent"/>
    
</DirectionalLayout>

二、ListContainer 组件用法

---

ListContainer 组件涉及到如下两个问题 :

① 提供的数据源 ;

② 将数据源中的数据展示到列表中 ;

数据源是 RecycleItemProvider 类型对象 , 一般需要自定义子类继承 RecycleItemProvider 类 , RecycleItemProvider 继承了抽象类 BaseItemProvider , 该抽象类中有 $4$ 个抽象方法 , 必须在自定义数据源中实现 ;

public abstract class BaseItemProvider {

    public abstract int getCount();

    public abstract Object getItem(int var1);

    public abstract long getItemId(int var1);

    public abstract Component getComponent(int var1, Component var2, ComponentContainer var3);
}

数据源需要实现的四个抽象方法 :

① getCount ( ) 方法 : 获取当前的数据源中有多少个数据条目 ;

    @Override
    public int getCount() {
        return items.size();
    }

② getItem ( ) 方法 : 获取给定索引对应的数据条目 ;

    @Override
    public Object getItem(int i) {
        return items.get(i);
    }

③ getItem ( ) 方法 : 获取当前索引 ;

    @Override
    public long getItemId(int i) {
        return i;
    }

④ getComponent ( ) 方法 : 返回列表项对应的显示的视图组件 ;

Component getComponent(int i, Component component, ComponentContainer componentContainer) 方法参数说明 :

① int i 参数 : 当前条目索引 ;

② Component component 参数 : 之前有可能已经创建了该组件, 如果该参数不为空 , 直接使用该组件 , 如果该参数为空 , 就创建新的组件 ;

③ ComponentContainer componentContainer 参数 : 列表容器 ;

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        Component ret = null;
        if (component == null){
            // 创建当前文本组件
            Text text = new Text(componentContainer.getContext());
            // 设置宽高
            text.setWidth(StackLayout.LayoutConfig.MATCH_PARENT);
            text.setHeight(StackLayout.LayoutConfig.MATCH_CONTENT);
            // 设置文本
            text.setText(items.get(i).text);
            // 设置文本大小
            text.setTextSize(100);
            ret = text;
        }else{
            ret = component;
        }

        return ret;
    }

设置列表数据 : 调用 ListContainer 对象的 setItemProvider( ) 方法为列表设置数据源 ;

        // 获取布局文件中的 ListContainer 列表
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer);

        // 构造数据源
        ArrayList<DataItem> items = new ArrayList<>();
        items.add(new DataItem("Tom"));
        items.add(new DataItem("Jerry"));
        items.add(new DataItem("Trump"));

        // 为列表设置数据源
        listContainer.setItemProvider(new MyRecycleItemProvider(items, this));

三、完整代码示例

---

package com.example.list.slice;

import com.example.list.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;

import java.util.ArrayList;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        // 获取布局文件中的 ListContainer 列表
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_listContainer);

        // 构造数据源
        ArrayList<DataItem> items = new ArrayList<>();
        items.add(new DataItem("Tom"));
        items.add(new DataItem("Jerry"));
        items.add(new DataItem("Trump"));

        // 为列表设置数据源
        listContainer.setItemProvider(new MyRecycleItemProvider(items, this));

    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

/**
 * 代表每个列表项数据
 */
class DataItem{
    /**
     * 列表项字符串
     */
    public String text;

    /**
     * 构造函数初始化列表项
     * @param text
     */
    public DataItem(String text) {
        this.text = text;
    }
}

/**
 * 数据源
 */
class MyRecycleItemProvider extends RecycleItemProvider{

    /**
     * 数据
     */
    private ArrayList<DataItem> items;

    /**
     * 当前显示列表的界面
     */
    private AbilitySlice abilitySlice;

    public MyRecycleItemProvider(ArrayList<DataItem> items, AbilitySlice abilitySlice) {
        this.items = items;
        this.abilitySlice = abilitySlice;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int i) {
        return items.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        Component ret = null;
        if (component == null){
            // 创建当前文本组件
            Text text = new Text(componentContainer.getContext());
            // 设置宽高
            text.setWidth(StackLayout.LayoutConfig.MATCH_PARENT);
            text.setHeight(StackLayout.LayoutConfig.MATCH_CONTENT);
            // 设置文本
            text.setText(items.get(i).text);
            // 设置文本大小
            text.setTextSize(100);
            ret = text;
        }else{
            ret = component;
        }

        return ret;
    }
}

运行效果 :

四、GitHub 地址

---

GitHub 主应用 : https://github.com/han1202012/HarmonyHelloWorld

ListContainer 组件示例 Module : https://github.com/han1202012/HarmonyHelloWorld/tree/master/list