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

举报
韩曙亮 发表于 2022/01/11 00:21:09 2022/01/11
【摘要】 文章目录 一、布局中设置列表 ListContainer 组件二、ListContainer 组件用法三、完整代码示例四、GitHub 地址 一、布局中设置列表 ListCo...

文章目录





一、布局中设置列表 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>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    •




二、ListContainer 组件用法


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

① 提供的数据源 ;

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


数据源是 RecycleItemProvider 类型对象 , 一般需要自定义子类继承 RecycleItemProvider 类 , RecycleItemProvider 继承了抽象类 BaseItemProvider , 该抽象类中有 4 4 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);
}

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    •


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

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

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

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

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

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

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    •

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    •


设置列表数据 : 调用 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));

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    •




三、完整代码示例


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


  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    • 
  
  • 20
    • 
  
  • 21
    • 
  
  • 22
    • 
  
  • 23
    • 
  
  • 24
    • 
  
  • 25
    • 
  
  • 26
    • 
  
  • 27
    • 
  
  • 28
    • 
  
  • 29
    • 
  
  • 30
    • 
  
  • 31
    • 
  
  • 32
    • 
  
  • 33
    • 
  
  • 34
    • 
  
  • 35
    • 
  
  • 36
    • 
  
  • 37
    • 
  
  • 38
    • 
  
  • 39
    • 
  
  • 40
    • 
  
  • 41
    • 
  
  • 42
    • 
  
  • 43
    • 
  
  • 44
    • 
  
  • 45
    • 
  
  • 46
    • 
  
  • 47
    • 
  
  • 48
    • 
  
  • 49
    • 
  
  • 50
    • 
  
  • 51
    • 
  
  • 52
    • 
  
  • 53
    • 
  
  • 54
    • 
  
  • 55
    • 
  
  • 56
    • 
  
  • 57
    • 
  
  • 58
    • 
  
  • 59
    • 
  
  • 60
    • 
  
  • 61
    • 
  
  • 62
    • 
  
  • 63
    • 
  
  • 64
    • 
  
  • 65
    • 
  
  • 66
    • 
  
  • 67
    • 
  
  • 68
    • 
  
  • 69
    • 
  
  • 70
    • 
  
  • 71
    • 
  
  • 72
    • 
  
  • 73
    • 
  
  • 74
    • 
  
  • 75
    • 
  
  • 76
    • 
  
  • 77
    • 
  
  • 78
    • 
  
  • 79
    • 
  
  • 80
    • 
  
  • 81
    • 
  
  • 82
    • 
  
  • 83
    • 
  
  • 84
    • 
  
  • 85
    • 
  
  • 86
    • 
  
  • 87
    • 
  
  • 88
    • 
  
  • 89
    • 
  
  • 90
    • 
  
  • 91
    • 
  
  • 92
    • 
  
  • 93
    • 
  
  • 94
    • 
  
  • 95
    • 
  
  • 96
    • 
  
  • 97
    • 
  
  • 98
    • 
  
  • 99
    • 
  
  • 100
    • 
  
  • 101
    • 
  
  • 102
    • 
  
  • 103
    • 
  
  • 104
    • 
  
  • 105
    • 
  
  • 106
    • 
  
  • 107
    • 
  
  • 108
    • 
  
  • 109
    • 
  
  • 110
    • 
  
  • 111
    • 
  
  • 112
    • 
  
  • 113
    • 
  
  • 114
    • 
  
  • 115
    •

运行效果 :

在这里插入图片描述





四、GitHub 地址


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

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

文章来源: hanshuliang.blog.csdn.net，作者：韩曙亮，版权归原作者所有，如需转载，请联系作者。

原文链接：hanshuliang.blog.csdn.net/article/details/111612800

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
GitHub
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入