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

简介: 【鸿蒙 HarmonyOS】UI 组件 ( 列表 ListContainer 组件 )(二)

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




运行效果 :

image.png







四、GitHub 地址


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


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


目录
相关文章
|
10月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
412 1
|
10月前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
891 1
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
10月前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
562 1
|
10月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
663 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
10月前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段三
本文介绍了UI开发中的样式复用与组件构建技术,涵盖@Extend、@Styles和@Builder的使用方法,并通过Swiper轮播、Scroll滚动、Tabs导航等常用组件实现典型界面效果,结合生肖抽卡、小米轮播、回顶按钮等案例,展示实际应用技巧。
251 1
|
10月前
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
本文介绍鸿蒙应用界面开发中的弹性布局(Flex)、绝对定位、层叠布局及ArkTS语法进阶,涵盖字符串拼接、类型转换、数组操作、条件与循环语句,并结合B站视频卡、支付宝首页等案例,深入讲解点击事件、状态管理与界面交互功能。
512 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二
|
10月前
|
JavaScript 前端开发 开发者
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
鸿蒙开发语言ArkTS在继承了Typescrip语法的基础上,主要扩展了声明式UI开发相关的能力。
432 1
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
484 15
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
474 11
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1125 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章