鸿蒙 ListContainer基础用法教程

前言：

各位同学大家好有段时间没有给大家更新文章，具体多久我也不记得，最近在学习鸿蒙开发（第二天学）写了一些小demo 就想着分享给家今天要讲的是 ListContainer 鸿蒙OS开发中的列表组件

准备工作

1 安装鸿蒙开发环境大家可以看我之前的文章
华为鸿蒙系统开发初体验：https://www.jianshu.com/p/f94c847c7fdc

效果图：

image.png

image.png

image.png

具体实现：

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

ListContainer的使用方法

1.在layout目录下的xml文件中创建ListContainer。

2.在layout目录下新建xml文件（例：item_sample.xml），作为ListContainer的子布局

3.创建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;
    }
}

4.ListContainer每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加ListContainer上。创建SampleItemProvider.java，继承自RecycleItemProvider。必须重写的方法如下：

image.png

代码示例如下：

package com.example.listview;
import ohos.agp.components.*;
import java.util.List;
/**
 * 创建人：xuqing
 * 创建时间：2020年12月18日13:37:27
 * 类说明： 适配器
 * 
 * 
 * 
 */
public class SampleItemProvider extends RecycleItemProvider {
    private List list;
    private MainAbility slice;
    public SampleItemProvider(List list, MainAbility slice) {
        this.list = list;
        this.slice = slice;
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        if (convertComponent== null) {
            Component cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample,null,false);
            SampleItem sampleItem = list.get(position);
            Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
            text.setText(sampleItem.getName());
            return cpt;
        } else {
            return convertComponent;
        }
    }
}

5.在Java代码中添加ListContainer的数据，并适配其数据结构。

 @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 list = getData();
        SampleItemProvider sampleItemProvider = new SampleItemProvider(list,this);
        listContainer.setItemProvider(sampleItemProvider);

        listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("你点点击是:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });

        listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("长按事件点击:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
                return false;
            }
        });

    }
  private ArrayList getData() {
        ArrayList list = new ArrayList<>();
        for (int i = 0; i <= 10; i++) {
            list.add(new SampleItem("item"+i));
        }
        return list;
    }

假数据

    private ArrayList getData() {
        ArrayList list = new ArrayList<>();
        for (int i = 0; i <= 10; i++) {
            list.add(new SampleItem("item"+i));
        }
        return list;
    }

显示效果：

image.png

ListContainer的常用设置

item 子布局的点击事件

   listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("你点点击是:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });

效果如下

image.png

item 子布局的长按事件

  listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("长按事件点击:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
                return false;
            }
        });

效果如下

image.png

ListContainer的样式设置

表2 ListContainer的样式设置

image.png

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

在Java代码中设置

listContainer.setOrientation(Component.HORIZONTAL);

横向滑动效果如图

设置ListContainer的开始和结束偏移量

listContainer.setContentOffSet(32,16);

为了便于观察，分别在子布局和ListContainer布局中添加背景色：

在item_sample.xml的根布局中添加背景色。

...

在ListContainer布局文件中添加背景色。

设置列表容器的开始偏移量为32，结束偏移量为16效果

设置回弹效果。
在xml中设置：

在Java代码中设置

listContainer.setReboundEffect(true);

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

listContainer.setReboundEffectParams(40,0.6f,20);

设置着色器颜色。
在xml中设置：

在Java代码中设置：

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

效果如下图

到此鸿蒙os 列表组件 ListContainer 基础知识就讲完了

最后总结

鸿蒙 os ListContainer 列表组件基本用法和Android原生的lsitview 比较像但是比起原生安卓的listview 更加强大原生android 并不直接支持横向滑动以及直接支持回弹效果 ListContainer 基本用法对于安卓程序员来说比较好上手看一下api 学习下本就能灵活运用了以上就是我个人在学习了2天的鸿蒙os开发 ListContainer 基础总结如果有纰漏和错误的地方希望大家指正最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。

阅读全文

下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.shuli.cc/?p=21640，转载请注明出处。

鸿蒙 ListContainer基础用法教程

前言：

准备工作

效果图：

具体实现：

ListContainer的使用方法

ListContainer的常用设置

ListContainer的样式设置

最后总结

评论0

在线客服

升级VIP

返回顶部

鸿蒙 ListContainer基础用法教程

前言：

准备工作

效果图：

具体实现：

ListContainer的使用方法

ListContainer的常用设置

ListContainer的样式设置

最后总结

猜你喜欢

HarmonyOS 应用开发之PageAbility的启动模式

HarmonyOS 应用开发之ArkTS异步并发(Promise和async/await)

鸿蒙 Ark Ui UIAbility组件生命周期

HarmonyOS基本UI封装——顶部Toast、骨架屏(六)

HarmonyOS基本UI封装——ImageLoader 图片上传(五)

HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多（四）

评论0

在线客服

升级VIP

返回顶部