「Mac畅玩鸿蒙与硬件16」鸿蒙UI组件篇6 - List 和 Grid 组件展示数据列表

ListGrid 是鸿蒙开发中的核心组件,用于展示动态数据。List 适合展示垂直或水平排列的数据列表,而 Grid 则适用于展示商品或图片的网格布局。本篇将展示如何封装组件,并通过按钮实现布局切换,提升界面的灵活性和用户体验。

在这里插入图片描述


关键词
  • List 组件
  • Grid 组件
  • 数据展示
  • 自定义列表项
  • 布局切换
  • 删除功能
  • 动态加载

一、List 组件基础
1.1 基本用法

List 组件通过 @State 数据渲染一个基础的纵向列表。

@Entry
@Component
struct ListExample {@State items: string[] = ['Item 1', 'Item 2', 'Item 3']; // 初始化数据build() {Column() {List() {// 遍历数据并渲染每个列表项ForEach(this.items, (item: string) => {ListItem() {Text(item) // 显示文本.fontSize(28) // 设置字体大小.padding(20); // 设置内边距}});}}.width('100%') // 设置列宽为 100%.height('100%') // 设置列高为 100%.justifyContent(FlexAlign.Center); // 子项垂直居中对齐}
}

效果示例
在这里插入图片描述


1.2 设置列表方向

通过 listDirection 设置列表的滚动方向。

List() {ForEach(this.items, (item: string) => {ListItem() {Text(item) // 显示文本.fontSize(28).padding(20); // 设置内边距}})
}
.listDirection(Axis.Horizontal); // Axis.Horizontal 可实现横向滚动;Axis.Vertical 可实现纵向滚动

1.3 添加分隔线

为列表项添加分隔线,提高视觉层次感。

List() {ForEach(this.items, (item: string) => {ListItem() {Text(item).fontSize(28).padding(20); // 设置内边距}})
}
.divider({ color: Color.Blue, strokeWidth: 1 }); // 蓝色分隔线

二、封装 LightItem 组件

将灯具的图片和名称封装为 LightItem 组件,供 ListGrid 使用。组件通过 @Prop 接收数据,并在按钮点击事件中执行删除操作。

@Component
export struct LightItem {@Prop item: number; // 灯具 IDbuild() {Column() {// 显示灯具图片Image($r(`app.media.light_on_${this.item}`)).width(100) // 设置图片宽度.height(100); // 设置图片高度// 显示灯具名称Text(`${this.item}`).fontSize(18) // 设置字体大小.fontWeight(FontWeight.Bold) // 加粗.padding(10); // 设置文本内边距Button('删除') // 删除按钮.backgroundColor(Color.Red) // 按钮背景色.fontColor(Color.White); // 按钮文字颜色}.padding(10); // 设置组件外边距}
}

三、实现布局切换

新增一个按钮,通过点击按钮在 ListGrid 两种布局之间切换。删除功能则在父组件中实现。

import { LightItem } from './LightItem'; // 导入 LightItem 组件@Entry
@Component
struct LayoutSwitcherExample {@State items: Array<number> = [1, 2, 3, 4, 5, 6]; // 初始化数据@State isGridLayout: boolean = false; // 控制布局状态// 切换布局的方法toggleLayout() {this.isGridLayout = !this.isGridLayout;}// 删除列表项的方法deleteItem(item: number) {this.items = this.items.filter(i => i !== item); // 从列表中移除当前项}build() {Column() {// 布局切换按钮Button(this.isGridLayout ? '切换到列表布局' : '切换到网格布局').onClick(() => this.toggleLayout()) // 切换布局状态.padding(10) // 设置按钮内边距.backgroundColor(Color.Gray) // 设置按钮背景颜色.fontColor(Color.White); // 设置按钮文字颜色// 根据状态动态渲染布局if (this.isGridLayout) {Grid() {ForEach(this.items, (item: number) => {GridItem() {Column() {LightItem({ item: item }) // 渲染 LightItem 组件.onClick(() => this.deleteItem(item)) // 删除项}}});}.columnsTemplate('1fr 1fr') // 每行两列.columnsGap(10) // 设置列间距.rowsGap(10); // 设置行间距} else {List() {ForEach(this.items, (item: number) => {ListItem() {Column() {LightItem({ item: item }) // 渲染 LightItem 组件.onClick(() => this.deleteItem(item)) // 删除项}}});}.listDirection(Axis.Horizontal); // 设置为横向滚动}}.width('100%') // 设置宽度.height('100%') // 设置高度.alignItems(HorizontalAlign.Center) // 子项水平居中.justifyContent(FlexAlign.Center); // 子项垂直居中}
}

四、常见问题与优化
  1. 性能优化

    • 使用分页加载或虚拟滚动,避免大数据列表导致的性能问题。
  2. 状态同步问题

    • 通过 @State@Prop 保持数据同步,确保界面状态及时更新。
  3. 布局调整

    • 根据实际需求调整 ListGrid 的样式,使界面更美观。

小结

本篇展示了如何封装 LightItem 组件,并通过按钮实现 ListGrid 布局的动态切换。通过合理的组件封装和状态管理,实现了灵活的界面布局和高效的用户交互。


下一篇预告

下一篇将介绍 Animation 组件,展示如何使用动画效果 。


上一篇: 「Mac畅玩鸿蒙与硬件15」鸿蒙UI组件篇5 - Slider 和 Progress 组件
下一篇: 「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/465527.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「Mac畅玩鸿蒙与硬件25」UI互动应用篇2 - 计时器应用实现

本篇将带领你实现一个实用的计时器应用&#xff0c;用户可以启动、暂停或重置计时器。该项目将涉及时间控制、状态管理以及按钮交互&#xff0c;是掌握鸿蒙应用开发的重要步骤。 关键词 UI互动应用时间控制状态管理用户交互 一、功能说明 在这个计时器应用中&#xff0c;用户…

群控系统服务端开发模式-应用开发-上传工厂开发

现在的文件、图片等上传基本都在使用oss存储。而现在常用的oss存储有阿里云、腾讯云、七牛云、华为云等&#xff0c;但是用的最多的还是前三种。而我主要封装的是本地存储、阿里云存储、腾讯云存储、七牛云存储。废话不多说&#xff0c;直接上传设计图及说明&#xff0c;就一目…

Hadoop生态圈框架部署(五)- Zookeeper完全分布式部署

文章目录 前言一、Zookeeper完全分布式部署&#xff08;手动部署&#xff09;1. 下载Zookeeper2. 上传安装包2. 解压zookeeper安装包3. 配置zookeeper配置文件3.1 创建 zoo.cfg 配置文件3.2 修改 zoo.cfg 配置文件3.3 创建数据持久化目录并创建myid文件 4. 虚拟机hadoop2安装并…

UI设计师们,AI留给你们的窗口期没多少了得亏生成的模型不能编辑

对于 UI 设计师们来说&#xff0c;AI 的发展确实带来了一定的挑战。 虽然目前生成的模型不能编辑&#xff0c;但谁也无法确定未来的发展走向。 然而&#xff0c;设计师们也不必过分担忧。人类的创造力、审美能力和对用户需求的深刻理解是无法被轻易取代的。 设计师可以利用这…

Gerrit 2.12.2 window版本部署

背景&#xff1a;原有gerritgit服务器一套&#xff08;以下称老gerrit&#xff09;&#xff0c;现在需要在备份机器上面也搭建一套gerrit(以下称新gerrit)。 目前老gerrit服务器信息为&#xff1a;centos gerrit 2.12.2jdk1.8mysql5.1.73nginx 新gerrit服务器信息为&#xf…

一文搞懂Linux kernel编译步骤

一、前言 什么是Linux的内核编译呢&#xff1f;简单来说&#xff0c;Linux内核编译是一个将内核源代码转换成可在特定的硬件架构上运行的二进制文件的过程。通过编译内核&#xff0c;我们可以根据自己的需求和兴趣对内核进行定制和优化&#xff0c;以满足特定的应用场景。下文…

CST汽车天线仿真(双向混合求解)

CST从2018版本开始具有双向混合求解&#xff0c;到2019版已经通用微波工作室的各个求解器之间的双向混合。具体的混合对象如下图&#xff1a; 对天线的安装和耦合仿真&#xff0c;意味着对复杂结构&#xff08;天线&#xff09;和电大尺寸环境&#xff08;安装平台&#xff0c;…

leetcode-5-最长回文子串

题解&#xff1a; 回文串&#xff1a;如果一个字符串正着读和反着读都是一样的那这个字符串就是回文串。 对于一个子串而言&#xff0c;如果它是回文串&#xff0c;并且长度大于 2&#xff0c;那么将它首尾的两个字母去除之后&#xff0c;它仍然是个回文串。 1、初始化字典d…

Python反射API:面向对象编程的“魔法镜”

在Python的世界里&#xff0c;面向对象编程&#xff08;OOP&#xff09;就像是一场盛大的化妆舞会&#xff0c;每个对象都穿着华丽的外衣&#xff0c;隐藏着自己的真实面目。而Python的反射API&#xff0c;就像是一面“魔法镜”&#xff0c;能够让我们窥探这些对象的真实身份和…

Python练习8

Python日常练习 题目&#xff1a; 编写函数&#xff0c;接收两个正整数作为参数&#xff0c;返回一个元组&#xff0c; 其中第一个元数为最大公约数&#xff0c;第二个元素为最小公倍数。 例如&#xff1a; 若输入12&#xff0c;8&#xff0c;则输出如下 【请输入一个…

推荐程序员好用的浏览器插件

推荐程序员好用的浏览器插件 1. 网页颜色控制&#xff1a;Dark Reader安装效果 2. 前端助手&#xff1a;FeHelper安装效果 3. markdown可视化&#xff1a;Markdown Reader安装效果 4. ES插件&#xff1a;Multi Elasticsearch Heads安装效果 1. 网页颜色控制&#xff1a;Dark Re…

希尔排序算法

1、基本思想 希尔排序也称缩小增量排序&#xff0c;是插入排序的一种更高效的改进版本。它的基本思想是先将待排序的数组元素按照一定的间隔&#xff08;称为增量&#xff09;分成若干个子序列&#xff0c;分别对这些子序列进行插入排序&#xff0c;随着迭代的进行&#xff0c;…

太速科技-634-基于3U PXIe的VU3P FMC+数据接口板

基于3U PXIe的VU3P FMC数据接口板 一、产品概述 板卡是一款基于 3U PXIE 总线架构的高性能数据预处理FMC 载板&#xff0c;具有 1 个 FMC&#xff08;HPC&#xff09;接口&#xff0c;1 个 X8 GTH 背板互联接口&#xff0c;可以实现 1 路 PCIe x8。板卡主控芯片采用Xilin…

OpenCV基本操作(python开发)——(8)实现芯片瑕疵检测

OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;1&#xff09; 读取图像、保存图像 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;2&#xff09;图像色彩操作 OpenCV基本操作&#xff08;python开发&#xff09;——&#xff08;3&…

MySQL数据库中的视图

视图 ​ 本篇将开始介绍有关数据库中视图的相关知识点&#xff0c;其中主要包含视图的基本使用&#xff0c;视图规则和限制。 ​ 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一样&#xff0c;视图包含一系列带有名称的列和行数据&#xff0c;视图的数据变化会…

Docker 镜像拉不动?自建 Docker Hub 加速站 解决镜像拉取失败

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 众所周知&#xff0c;6 月份的时候&#xff0c;Docker Hub 的镜像就已经无法正常拉取&#xff0c;那会随手用 Nginx 反代了一下 Docker Hub&#xff0c;建了个自用的镜像站&#xff0c;一直用到了 9 月份&…

应对传统能源企业管理人员青黄不接问题:搭建系统完善的招聘管理体系

应对传统能源企业管理人员青黄不接问题&#xff1a;搭建系统完善的招聘管理体系 对于很多传统能源企业由于成立时间久&#xff0c;发展到现在&#xff0c;往往都面临着一个共性问题&#xff0c;即未来三到五年&#xff0c;老员工退休后&#xff0c;新员工如何接续的问题。这个…

C++进阶-->红黑树的实现

1、红黑树的概念 红黑树是一棵二叉搜索树&#xff0c;他和前面AVL树不同的是红黑树不是通过平衡因子来保证树的平衡&#xff0c;而是在树结点的处加多了个记录颜色的变量&#xff0c;这个变量可以是红色或者黑色。通过对任何一条从根到叶子的路径上各个结点的颜色进行约束&…

Linux操作系统开机引导

linux操作系统的开机引导的过程 linux操作系统开机流程图 1、开机自检&#xff1a;根据bios的设置&#xff0c;对cpu、内存、显卡、键盘等设备进行初步检测&#xff0c;如果以上检测设备正常工作&#xff0c;系统会把控制权移交到硬盘 总结&#xff1a;检测包含系统启动操作系…

DataX 的安装配置和使用 (详细版)

1&#xff0c;上传解压 1&#xff0c;开始上传安装包到你虚拟机上放置安装包的文件夹 2&#xff0c;开始解压 ,配置环境变量 1、上传 /opt/modules 2、解压 tar -zxvf datax.tar.gz -C /opt/installs 3、修改 vi /etc/profile 配置环境变量&#xff1a; export DAT…