Harmony OS — ListContainer列表

已于 2023-03-03 17:32:41 修改
阅读量636 收藏 4
点赞数
分类专栏： HarmonyOS 文章标签： Harmony OS ListContainer 列表 王睿丶 鸿蒙系统
于 2021-06-28 22:29:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27494201/article/details/118313298
版权

文章目录

1、ListContainer 是什么？

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

2、简单使用

在这里插入图片描述

  • ability_main.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"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>
  • 在layout目录下新建xml文件（例：item_sample.xml），作为ListContainer的子布局。
<?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:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>
  • 创建SampleItem.java，作为ListContainer的数据包装类。
public class SampleItem {
    private String name;
    public SampleItem(String name) {
        this.name = name;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
  • ListContainer每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到ListContainer上。
    创建SampleItemProvider.java，继承自BaseItemProvider。必须重写的方法如下：
    在这里插入图片描述
    代码示例如下：
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;
import java.util.List;
public class SampleItemProvider extends BaseItemProvider {
    private List<SampleItem> list;
    private AbilitySlice slice;
    public SampleItemProvider(List<SampleItem> 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;
        if (convertComponent == null) {
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false);
        } else { 
            cpt = convertComponent;
        }
        SampleItem sampleItem = list.get(position);
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
        text.setText(sampleItem.getName());
        return cpt;
    }
}
  • 在Java代码中添加ListContainer的数据，并适配其数据结构
public class MainAbilitySlice extends AbilitySlice {

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

    //初始化数据
    private void initListContainer() {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        List<SampleItem> list = getData();
        SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this);
        listContainer.setItemProvider(sampleItemProvider);
    }
    private ArrayList<SampleItem> getData() {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 30; i++) {
            list.add(new SampleItem("Item" + i));
        }
        return list;
    }

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

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

3、ListContainer 常用接口

（1）设置响应点击事件
在这里插入图片描述

listContainer.setItemClickedListener((container, component, position, id) -> {
    SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
    new ToastDialog(this)
            .setText("you clicked:" + item.getName())
            // Toast显示在界面中间
            .setAlignment(LayoutAlignment.CENTER)
            .show();
});

（2）设置响应长按事件

listContainer.setItemLongClickedListener((container, component, position, id) -> {
    SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);
    new ToastDialog(this)
            .setText("you long clicked:" + item.getName())
            .setAlignment(LayoutAlignment.CENTER)
            .show();
     return false;
});

4、ListContainer 样式设置

ListContainer的样式设置相关的接口如下：
在这里插入图片描述

（1）设置水平布局

在这里插入图片描述

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

listContainer.setOrientation(Component.HORIZONTAL);

（2）自定义样式
实现：在子布局和ListContainer布局中添加背景色

在这里插入图片描述

  • 设置ListContainer的开始和结束偏移量
listContainer.setContentOffSet(32, 16);
  • 在item_sample.xml的根布局中添加背景色
<DirectionalLayout
    ...
    ohos:background_element="#FAEBD7">
    ...
</DirectionalLayout>
  • 在ListContainer布局文件中添加背景色
<ListContainer
    ...
    ohos:background_element="#FFDEAD"/>

（3）设置回弹效果

在这里插入图片描述

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

listContainer.setReboundEffect(true);
  • 在开启回弹效果后，可以调用setReboundEffectParams()方法调整回弹效果。
listContainer.setReboundEffectParams(40, 0.6f, 20);

（4）设置着色器颜色
在这里插入图片描述

<ListContainer
    ...
    ohos:shader_color="#90EE90"/>

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

5、ListContainer 性能优化

在适配ListContainer的数据时，无论是新创建的列表项实例，还是从缓存中获取到的，都需要调用方法findComponentById()获取所有子组件并进行数据填充，大量调用该方法，会损耗ListContainer的性能。比较好的解决方案是在创建列表项实例时进行调用，将获取到的所有子组件绑定到列表项的实例中，当从缓存中获取到列表项实例后，直接使用绑定的的子组件填充新数据。完整示例代码如下：

在这里插入图片描述

SettingItem.java

public class SettingItem {

    private int imageId;
    private String settingName;
    private boolean isChecked;

    public SettingItem(int imageId, String settingName, boolean isChecked) {
        this.imageId = imageId;
        this.settingName = settingName;
        this.isChecked = isChecked;
    }

    public int getImageId() {
        return imageId;
    }
   
    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getSettingName() {
        return settingName;
    }

    public void setSettingName(String settingName) {
        this.settingName = settingName;
    }

    public boolean isChecked() {
        return isChecked;
    }

    public void setChecked(boolean checked) {
        isChecked = checked;
    }
}

layout_item_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="80vp"
    ohos:width="match_parent"
    ohos:padding="8vp"
    ohos:orientation="horizontal">

    <Image
        ohos:id="$+id:ima_setting"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:layout_alignment="vertical_center"
        ohos:weight="2">
    </Image>

    <Text
        ohos:id="$+id:text_setting"
        ohos:height="match_content"
        ohos:width="0"
        ohos:padding="4fp"
        ohos:text_size="20fp"
        ohos:start_padding="8vp"
        ohos:end_padding="8vp"
        ohos:weight="6"
        ohos:layout_alignment="vertical_center"/>

    <Switch
        ohos:id="$+id:switch_setting"
        ohos:height="20vp"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:layout_alignment="vertical_center"/>

</DirectionalLayout>

SettingProvider.java

public class SettingProvider extends BaseItemProvider{
    // ListContainer的数据集合
    private List<SettingItem> settingList;
    private AbilitySlice slice;

    public SettingProvider(List<SettingItem> list, AbilitySlice slice) {
        this.settingList = list;
        this.slice = slice;
    }
    // 用于保存列表项中的子组件信息
    public class SettingHolder {
        Image settingIma;
        Text settingText;
        Switch settingSwitch;

        SettingHolder(Component component) {
            settingIma = (Image) component.findComponentById(ResourceTable.Id_ima_setting);
            settingText = (Text) component.findComponentById(ResourceTable.Id_text_setting);
            settingSwitch = (Switch) component.findComponentById(ResourceTable.Id_switch_setting);

            settingSwitch.setTrackElement(trackElementInit(
                    new ShapeElement(slice, ResourceTable.Graphic_track_on_element),
                    new ShapeElement(slice, ResourceTable.Graphic_track_off_element)));

            settingSwitch.setThumbElement(thumbElementInit(
                    new ShapeElement(slice, ResourceTable.Graphic_thumb_on_element),
                    new ShapeElement(slice, ResourceTable.Graphic_thumb_off_element)));

        }

        private StateElement trackElementInit(ShapeElement on, ShapeElement off) {
            StateElement trackElement = new StateElement();
            trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
            trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
            return trackElement;
        }



        private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
            StateElement thumbElement = new StateElement();
            thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
            thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
            return thumbElement;
        }
    }

    @Override
    public int getCount() {
        return settingList == null ? 0 : settingList.size();
    }

    @Override
    public Object getItem(int position) {
        if (settingList != null && position >= 0 && position < settingList.size()){
            return settingList.get(position);
        }
        return null;
    }

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

    @Override
    public Component getComponent(int position, Component component, ComponentContainer componentContainer) {
        final Component cpt;
        SettingHolder holder;
        SettingItem setting = settingList.get(position);
        if (component == null) {
            cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_layout_item_setting, null, false);
            holder = new SettingHolder(cpt);
            // 将获取到的子组件信息绑定到列表项的实例中
            cpt.setTag(holder);
        } else {
            cpt = component;
            // 从缓存中获取到列表项实例后，直接使用绑定的子组件信息进行数据填充。
            holder = (SettingHolder) cpt.getTag();
        }
        holder.settingIma.setPixelMap(setting.getImageId());
        holder.settingText.setText(setting.getSettingName());
        holder.settingSwitch.setChecked(setting.isChecked());
        return cpt;
    }
}

thumb_off_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid
        ohos:color="#FFFFFF"/>
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="20vp"
        ohos:bottom="20vp"/>
</shape>

thumb_on_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="oval">
    <solid
        ohos:color="#1E90FF"/>
    <bounds
        ohos:top="0"
        ohos:left="0"
        ohos:right="20vp"
        ohos:bottom="20vp"/>
</shape>

track_off_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#808080"/>
    <corners
        ohos:radius="20vp"/>
</shape>

track_on_element.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <solid
        ohos:color="#87CEFA"/>
    <corners
        ohos:radius="20vp"/>
</shape>
  • 在layout文件夹下，创建ListContainerSlice对应的布局文件layout_listcontainer.xml，并添加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:padding="8vp"
    ohos:orientation="vertical">
    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
</DirectionalLayout>

ListContainer.java

public class ListContainerSlice extends AbilitySlice {
   
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        setUIContent(ResourceTable.Layout_layout_listcontainer);
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        SettingProvider provider = new SettingProvider(getData(), this);
        listContainer.setItemProvider(provider);
    }

    private List<SettingItem> getData() {
        ArrayList<SettingItem> data = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            data.add(new SettingItem(
                    ResourceTable.Media_icon,
                    "SettingName" + i,
                    i % 3 == 0
            ));
        }
        return data;
    }
}

6、更多

ListContainer 更多

王睿丶
关注
专栏目录
HarmonyOS以长列表联系人为例，演示ListContainer组件的基本使用.zip
08-02
在鸿蒙操作系统（HarmonyOS）的开发过程中，ListContainer组件是至关重要的，它用于展示大量、连续的数据，尤其适合创建列表形式的应用界面。在这个"HarmonyOS以长列表联系人为例，演示ListContainer组件的基本使用...
scatter python cmap_使用matplotlib中scatter方法画散点图
weixin_39779032的博客
12-05 788
本文实例为大家分享了用matplotlib中scatter方法画散点图的具体代码，供大家参考，具体内容如下1、最简单的绘制方式绘制散点图是数据分析过程中的常见需求。python中最有名的画图工具是matplotlib，matplotlib中的scatter方法可以方便实现画散点图的需求。下面我们来绘制一个最简单的散点图。数据格式如下：0 7464031 12630432 9823603...
HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ListContainer
sybh的博客
01-13 1021
ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。支持的XML属性、ListContainer的使用方法、ListContainer的常用接口、ListContainer的样式设置、ListContainer性能优化
HarmonyOS几种列表方式，List列表容器、Grid网格容器、Swiper轮播图
最新发布
张雨的博客
07-22 609
【代码】HarmonyOS几种列表方式，List列表容器、Grid网格容器、Swiper轮播图。
鸿蒙HarmonyOS开发：List列表组件的使用详解及案例演示
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
05-15 5577
在我们常用的手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含列表，“首页”页面中包含两个网格布局，“商城”页面中包含一个商品列表。列表中都包含一系列相同宽度的列表项，连续、多行呈现同类数据，例如图片和文本。常见的列表有线性列表（List列表）和网格布局（Grid列表）。为了帮助开发者构建包含列表的应用，ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。
鸿蒙 Harmony 开发 Ark Stage模式下 List 和Scroll实现锁定 双向表头的复杂表格。
yakie的专栏
12-05 1024
关键代码：在左侧list上下滑动的时候，调用：if (this.isLeftScroll) { this.rightYScroller.scrollTo({ xOffset: 0,yOffset: this.verticalOffset}) }右侧List上下滑动的时候，调用：if (!已知问题：1，右侧滑动带动左侧上下滑动的时候流畅，但是左侧带动右侧滑动的时候，右侧数据栏List出现卡顿和闪烁，希望能看出问题的不吝指教。2，横屏适配没处理。
HarmonyOS应用开发-qrcode.docx
05-12
HarmonyOS 应用开发-qrcode 二维码生成 在 HarmonyOS 应用开发中，qrcode 二维码生成是非常重要的一个功能。本文将详细介绍 HarmonyOS 应用开发-qrcode 二维码生成的相关知识点。 一、项目创建 在 HarmonyOS 应用...
HarmonyOS应用开发-下拉刷新实现.docx
04-22
HarmonyOS 应用开发 - 下拉刷新实现 HarmonyOS 是华为自研的操作系统，具有轻便、灵活、安全的特点。下拉刷新是移动应用程序中常用的交互方式，本文将介绍 HarmonyOS 应用开发中下拉刷新的实现。 创建项目 要实现...
1-HarmonyOS通讯录开发实验详细操作手册（J.pdf
09-23
本实验手册将指导学生掌握 HarmonyOS 移动应用开发工具的使用，掌握移动应用开发的需求分解与实现步骤拆解，并掌握 UI 组件与布局、ListContainer 子布局结合 RecycleItemProvider 使用、日志打印、消息提示、页面...
3-15分钟玩转HarmonyOS服务卡片_最终美化版1
08-03
在本教程中，我们将探索如何在15分钟内利用HarmonyOS服务卡片（Service Widget）进行快速开发。服务卡片作为FA（Feature Ability）的一种界面展现形式，旨在将关键信息或操作直观地呈现给用户，从而减少用户体验的...
鸿蒙Harmony-列表组件（List）详解
袁震的博客
01-16 5625
不要和别人比生活，每个人阶段不同，追求不同，活法自然也不同。只要今天的你能比昨天的你快乐一点点，那你就是自己人生赢家。
HarmonyOS之常用组件ListContainer的功能和使用
╰つ栺尖篴夢ゞ
08-01 2263
一、ListContainer 简介 ListContainer 是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。 二、支持的 XML 属性 ListContainer 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。 ListContainer 的自有 XML 属性见下表： 属性名称 中文描述 取值 取值说明 使用案例 rebound_effect 开启/关闭回弹效果 boolean类型 可以直接设置tr
4.3【HarmonyOS鸿蒙开发】组件ListContainer(上)
hanru723的博客
07-16 1199
4.3【HarmonyOS鸿蒙开发】组件ListContainer(上) 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。 MVC的设计模式 m：model：数据模型 data：数组，集合，。。。 V：view：视图 ListContainer c：control：控制器 Provider 一、支持的XML属性 ListContainer的共有XML属性继承自：Component L
HarmonyOS开发42：ListContainer列表容器组件基本用法
GeniusAng的博客
08-19 1174
ListContainer是一个列表容器类组件。在这里的每一行，我们都可以看做是一个item。如下图所示，包裹了所有item的红色的容器，就是ListContainer。 注意细节： ① 每一行其实就是一个独立的item。 ② 在屏幕的上面和下面，还有很多没有展示出来的item。 当我们用手指往上滑动的时候，就可以到下面的item。 当我们用手指往下滑动的时候，就可以到上面的item。 只不过划出屏幕的item会被销毁，而没有划入屏幕的item 还没有创建出来。 ③ 如果item过多，在内存会有垃圾。这个问
HarmonyOS_ListContainer
Kelvin_LBY的博客
06-30 182
HarmonyOS_ListContainer 准备ListContainer 在layout下新建listitem.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"
HarmonyOS鸿蒙系统三大类布局都有哪些组件（布局类、显示类、交互类） HarmonyOS鸿蒙开发基础
iCloudEnd的博客
09-12 3682
布局类 提供了不同布局规范的组件容器，例如以单一方向排列的DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的PositionLayout等。 PositionLayout DirectionalLayout StackLayout DependentLayout TableLayout AdaptiveBoxLayout 显示类 提供了单纯的内容显示，例如用于文本显示的Text，用于图像显示的Image等。 Text Image Clock TickT
鸿蒙真的是套壳吗？HarmonyOS应用开发初体验，Java原生和JavaScript的mvvm开发
热门推荐
qq_41689712的博客
09-17 1万+
初探寻鸿蒙os的应用开发 本期视频已发布到bilibili更多文章请查我的个人博客 注意是应用开发，没错码农（应用开发）一般关注这个就行了 IDE 点击应用开发以后，点击链接下载IDE,DevEco Studio是基于IDEA开源版魔改的，别再说什么抄袭Androidstudio了，使用这个工具没毛病，快速适应，gradle（gradle是打包构建工具，和Maven这种类似）的下载终于快了一次了 安装过程没什么好说的，就是如果你C盘不够了，安装SDK的时候可以先不确定，进入IDE以后修改安装位置再安装
C++核心准则T.12:声明局部变量类型时，概念比auto更好
面向对象思考
10-26 568
T.12: Prefer concept names overautofor local variables T.12:声明局部变量类型时，概念比auto更好 Reason（原因） autois the weakest concept. Concept names convey more meaning than justauto. auto是最弱的概念。相比只用auto，概念名可以传递更多信息。 Example (using TS concepts) 示例（使用TS概念） ...
HarmonyOS应用开发者认证考试指南
"HarmonyOS应用开发者基础认证考试的题目及答案涵盖了HarmonyOS应用开发的基础知识，包括数据存储、Web组件、自定义组件生命周期、布局管理、页面路由、多媒体组件以及网络请求等核心概念。" 在 HarmonyOS 应用开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王睿丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值