【鸿蒙 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


目录
相关文章
|
2天前
|
人工智能 API 开发者
HarmonyOS Next~鸿蒙应用框架开发实战:Ability Kit与Accessibility Kit深度解析
本书深入解析HarmonyOS应用框架开发,聚焦Ability Kit与Accessibility Kit两大核心组件。Ability Kit通过FA/PA双引擎架构实现跨设备协同,支持分布式能力开发;Accessibility Kit提供无障碍服务构建方案,优化用户体验。内容涵盖设计理念、实践案例、调试优化及未来演进方向,助力开发者打造高效、包容的分布式应用,体现HarmonyOS生态价值。
53 27
|
2天前
|
人工智能 API 语音技术
HarmonyOS Next~鸿蒙AI功能开发:Core Speech Kit与Core Vision Kit的技术解析与实践
本文深入解析鸿蒙操作系统(HarmonyOS)中的Core Speech Kit与Core Vision Kit,探讨其在AI功能开发中的核心能力与实践方法。Core Speech Kit聚焦语音交互,提供语音识别、合成等功能,支持多场景应用;Core Vision Kit专注视觉处理,涵盖人脸检测、OCR等技术。文章还分析了两者的协同应用及生态发展趋势,展望未来AI技术与鸿蒙系统结合带来的智能交互新阶段。
51 31
|
14天前
|
JavaScript
HarmonyOS NEXT鸿蒙实现自定义组件插槽
在HarmonyOS NEXT中,通过`@BuilderParam`装饰器实现类似Vue-Slot或React-RenderProps的功能,允许将UI结构的函数作为参数传递给组件并在指定位置渲染。具体步骤如下:
29 5
HarmonyOS NEXT鸿蒙实现自定义组件插槽
|
10天前
|
开发者 索引 容器
HarmonyOS NEXT 实战系列04-组件状态
本文介绍了ArkUI中组件状态的三种装饰器:@State、@Prop和@Link。@State用于定义状态变量,其变化驱动UI更新;@Prop实现父组件向子组件单向传值,子组件修改不会影响父组件;@Link则在父子组件间建立双向绑定,实现数据同步更新。通过示例代码详细展示了简单类型、对象类型及数组类型变量的操作方法,以及自定义组件的创建与复用,帮助开发者理解数据驱动UI的核心机制。
|
22天前
|
数据采集 人工智能 数据可视化
Harmony os next~鸿蒙系统开发
鸿蒙系统开发简介: 鸿蒙系统(HarmonyOS)是华为自主研发的面向全场景的分布式操作系统。它旨在为不同设备提供统一的操作平台,支持手机、平板、智能穿戴、车机等多种终端。鸿蒙系统具备微内核架构、低时延和高安全性等特性,通过分布式技术实现设备间无缝协同。开发者可以利用其丰富的API和工具链,构建跨平台应用,提升用户体验。
35 0
|
1月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
188 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
15天前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
69 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
|
4月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
1月前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
60 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
1月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
86 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)

热门文章

最新文章