当前位置：首页 > news >正文

HarmonyOS 5.0应用开发——列表（List）

news 来源：原创 2025/5/6 23:17:18

【高心星出品】

文章目录

- - 列表（List）
  - - 列表介绍
    - 列表布局
    - - 设置主轴方向
      - 设置交叉轴方向
    - 列表填充
    - - 分组列表填充
    - 滚动条位置
    - - 设置滚动位置
      - 滚到监听
    - 列表项侧滑

列表（List）

列表介绍

列表作为一种容器，会自动按其滚动方向排列子组件，向列表中添加组件或从列表中移除组件会重新排列子组件。

在这里插入图片描述

List的子组件必须是ListItemGroup或ListItem，ListItem和ListItemGroup必须配合List来使用。

列表布局

List布局方向可以垂直也可以水平，当垂直布局的时候主轴为垂直，可以呈现单列或多列形式；当水平布局的时候主轴为水平，可以呈现单行或多行形式。

在这里插入图片描述

主轴为垂直的方向

在这里插入图片描述

主轴为水平的方向

设置主轴方向

List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表。

若是水平滚动列表场景，将List的listDirection属性设置为Axis.Horizontal即可实现。listDirection默认为Axis.Vertical，即主轴默认是垂直方向。

List() {...
}
.listDirection(Axis.Horizontal)

设置交叉轴方向

List组件的交叉轴布局可以通过lanes和alignListItem属性进行设置，lanes属性用于确定交叉轴排列的列表项数量，alignListItem用于设置子组件在交叉轴方向的对齐方式。

List() {...
}
.lanes(2)
.alignListItem(ListItemAlign.Center)

列表填充

列表填充针对子布局视图和数据源，将数据源中每一条数据初始化给子布局视图ListItem就实现了列表填充。

在日常开发中，我们需要自定义ItemView和创建数据源Datas。

private contacts = [new Contact('小明', $r("app.media.iconA")),new Contact('小红', $r("app.media.iconB")),...]
//数据源build() {List() {ForEach(this.contacts, (item: Contact) => { //迭代初始化给listitemListItem() {Row() {Image(item.icon).width(40).height(40).margin(10)Text(item.name).fontSize(20)}.width('100%').justifyContent(FlexAlign.Start)}}, item => item.key)}.width('100%')

运行效果：

在这里插入图片描述

分组列表填充

分组列表填充的时候，数据源在设计的时候要设计标题和该标题对应的数据，在迭代的时候要进行嵌套循环。

//创建数据源
contactsGroups: object[] = [{title: 'A',contacts: [new Contact('艾佳', $r('app.media.iconA')),new Contact('安安', $r('app.media.iconB')),new Contact('Angela', $r('app.media.iconC')),],},{title: 'B',contacts: [new Contact('白叶', $r('app.media.iconD')),new Contact('伯明', $r('app.media.iconE')),],},...
]
List() {// 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合ForEach(this.contactsGroups, item => {ListItemGroup({ header: this.itemHead(item.title) }) {// 循环渲染ListItemForEach(item.contacts, (contact) => {ListItem() {...}}, item => item.key)}...})

在这里插入图片描述

粘性标题

分组填充的时候可以通过sticky设置粘性标题。

List() {// 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合ForEach(this.contactsGroups, item => {ListItemGroup({ header: this.itemHead(item.title) }) {// 循环渲染ListItemForEach(item.contacts, (contact) => {ListItem() {...}}, item => item.key)}...})}.sticky(StickyStyle.Header)  // 设置吸顶，实现粘性标题效果}

运行效果为：

在这里插入图片描述

滚动条位置

设置滚动位置

List组件初始化时，可以通过scroller参数绑定一个Scroller对象，进行列表的滚动控制。

通过scrollToIndex快速滚动到固定位置。

private listScroller: Scroller = new Scroller();
Stack({ alignContent: Alignment.BottomEnd }) {// 将listScroller用于初始化List组件的scroller参数，完成listScroller与列表的绑定。List({ space: 20, scroller: this.listScroller }) {...}...Button() {...}.onClick(() => {// 点击按钮时，指定跳转位置，返回列表顶部this.listScroller.scrollToIndex(0)})...
}

滚到监听

在List滚动的时候，可以通过监听List组件的onScrollIndex事件来获取滚动的索引位置。

可以配合字母表索引组件AlphabetIndexer来实现快速索引。

 Stack({ alignContent: Alignment.End }) {List({ scroller: this.listScroller }) {...}.onScrollIndex((firstIndex: number) => {// 根据列表滚动到的索引值，重新计算对应联系人索引栏的位置this.selectedIndex...})...// 字母表索引组件AlphabetIndexer({ arrayValue: alphabets, selected: 0 }).selected(this.selectedIndex)...}}

运行效果为：

在这里插入图片描述

列表项侧滑

ListItem列表项可以通过设置swipeAction属性来控制列表项的左右滑动功能。

swipeAction属性方法初始化时有必填参数SwipeActionOptions，其中，start参数表示设置列表项右滑时起始端滑出的组件，end参数表示设置列表项左滑时尾端滑出的组件。

@Builder itemEnd(index: number) {// 侧滑后尾端出现的组件Button({ type: ButtonType.Circle }) {Image($r('app.media.ic_public_delete_filled')).width(20).height(20)}.onClick(() => {this.messages.splice(index, 1);})...}List() {ForEach(this.messages, (item, index) => {ListItem() {...}.swipeAction({ end: this.itemEnd.bind(this, index) }) // 设置侧滑属性}, item => item.id.toString())}

运行效果为：

在这里插入图片描述

HarmonyOS 5.0应用开发——列表（List）

【高心星出品】文章目录列表（List）列表介绍列表布局设置主轴方向设置交叉轴方向列表填充分组列表填充滚动条位置设置滚动位置滚到监听列表项侧滑列表（List） 列表介绍列表作为一种容器，会自动按其滚动方向排列…...

编程日记 2025/5/6 23:17:18

C++设计模式外观模式（Facade）

什么是桥接模式？ 桥接模式（Bridge Pattern）是一种结构型设计模式，它的核心目的是解耦抽象部分和实现部分，让它们可以独立变化。在简单的描述中，桥接模式可以让你在不修改原有代码的情况下，分别…...

编程日记 2025/5/5 6:35:58

《Python基础》之Numpy库

目录简介一、创建数组 1、根据列表创建数组 2、创建全0数组 3、创建全1数组 4、创建单位矩阵 5、创建随机数数组二、查看数组的属性三、数组的操作 1、索引和切片 2、变形 3、拼接 （1）、vstack() 纵向拼接 （2）、hs…...

编程日记 2025/5/3 4:32:12

Python异步编程与API调用：提高效率与性能的实践指南

引言在当今的软件开发领域，异步编程已成为提高应用程序性能和响应能力的关键技术。特别是在处理I/O密集型任务，如API调用时，异步编程能够显著提升效率。本文将通过一个具体的示例——使用Python的asyncio和aiohttp库来异步调用API&#xff…...

编程日记 2025/5/4 0:42:15

Zookeeper3.4.14集群安装

Zookeeper3.4.14三节点集群安装为保证集群高可用，Zookeeper 集群的节点数最好是奇数，最少有三个节点，所以这里搭建一个三个节点的集群。(在一个节点模拟三节点，真实的三节点把ip替换一下即可，按照hadoop案件把网络打…...

编程日记 2025/5/6 2:29:08

电机驱动MCU介绍

电机驱动MCU是一种专为电机控制设计的微控制器单元，它集成了先进的控制算法和高性能的功率输出能力。电机驱动MCU采用高性能的处理器核心，具有快速的运算速度和丰富的外设接口。它内置了专业的电机控制算法，包括PID控制、FOC（Fi…...

编程日记 2025/5/3 16:18:01

Python 面向对象编程详解

Python 面向对象编程详解面向对象编程（OOP）是一种编程范式，它使用“对象”来设计软件。在 Python 中，面向对象编程非常强大，允许开发者通过类（class）和对象（object）来模…...

编程日记 2025/5/5 10:24:31

网络技术-不使用K8S情况下哪些方法可搭建服务链编排

在不使用Kubernetes（k8s）（或不使用Docker环境技术的）情况下，搭建服务链编排环境需要依赖其他服务编排和容器化技术，或者采用传统的虚拟机和服务管理方法。以下是一些可能的解决方案： 一、使用其…...

编程日记 2025/5/4 12:54:06

JVM_总结详解

1、CPU和内存的交互了解jvm内存模型前，了解下cpu和计算机内存的交互情况。【因为Java虚拟机内存模型定义的访问操作与计算机十分相似】有篇很棒的文章，从cpu讲到内存模型:[什么是java内存模型？] 在计算机中，cpu和内存的交互最…...

编程日记 2025/5/2 14:06:25

go语言 Pool实现资源池管理数据库连接资源或其他常用需要共享的资源

go Pool Pool用于展示如何使用有缓冲的通道实现资源池，来管理可以在任意数量的goroutine之间共享及独立使用的资源。这种模式在需要共享一组静态资源的情况（如共享数据库连接或者内存缓冲区）下非常有用。如果goroutine需要从池里得到这些资…...

编程日记 2025/5/2 0:41:02

初级数据结构——邻接表

目录前言一、定义与结构二、特点与性质三、构建方式四、操作与应用五、代码模版六、经典例题[1.——LCP 07. 传递信息](https://leetcode.cn/problems/chuan-di-xin-xi/description/)代码题解 [2.——547. 省份数量](https://leetcode.cn/problems/number-of-provinces/)代码题…...

编程日记 2025/4/30 16:58:18

QQ2024122-205851 import sys from PyQt6.QtGui import QIcon, QPixmap, QMovie from PyQt6.QtWidgets import QApplication, QWidget, QLineEdit, QPushButton, QLabel, QVBoxLayout# 封装我的窗口类 class LoginWidget(QWidget):# 构造函数def __init__(self):# 初始化父类su…...

编程日记 2025/5/6 11:27:57

多级缓存设计实践

缓存是什么？ 缓存技术是一种用于加速数据访问的优化策略。它通过将频繁访问的数据存储在高速存储介质（如内存）中，减少对慢速存储设备（如硬盘或远程服务器）的访问次数，从而提升系统的响应速度和…...

编程日记 2025/4/29 3:35:11

ElasticSearch学习笔记一

目录 1.ElasticSearch-Head如何启动 2.ElasticSearch-Head创建索引 2.1创建索引时的“分片数”和“副本数”是什么意思？ 类比 1：图书馆的书架与备份类比 2：快递分拣中心与包裹副本总结编辑 2.2如何查看现有索引的分片数和备份数 …...

编程日记 2025/5/1 11:13:17

A058-基于Spring Boot的餐饮管理系统的设计与实现

🙊作者简介：在校研究生，拥有计算机专业的研究生开发团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看项目链接获取⬇️，记得注明来意哦~🌹 赠送计算机毕业设计600个选题ex…...

编程日记 2025/5/5 11:56:20

代码设计：设计模式：应对变化

文章目录概述1.拆分代码2.解耦3.扩展总结概述代码的设计模式主要为了应对变化三种代码设计中应对变化的方式 1.拆分代码 2.解耦 3.扩展 1.拆分代码减小变化对代码的影响需要拆分代码的几种情况 1.类或方法的代码量巨大，导致代码可读性降低 2.存在复杂的代码，如…...

编程日记 2025/4/23 19:42:16

《Vue 路由导航：打造流畅的单页应用一》

一、Vue Router 简介 Vue Router 是什么？ Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页面应用并实现页面间导航。它基于 Vue 的组件系统构建，通过配置路由将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面…...

编程日记 2025/5/5 9:39:56

【xshell连接失败】

xshell用pem连接失败 Warning: Identity file ”open_api_test.ssh not accessible: No such file or directory. Warning: Identity file open_api_test2.pem not accessible: No such file or directory. Permission denied (publickey,gssapi-keyex,gssapi-with-mic). 搞了半…...

编程日记 2025/5/6 15:28:33

说说Elasticsearch拼写纠错是如何实现的？

大家好，我是锋哥。今天分享关于【说说Elasticsearch拼写纠错是如何实现的？】面试题。希望对大家有帮助； 说说Elasticsearch拼写纠错是如何实现的？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 Elasticsearch 中&…...

编程日记 2025/5/6 10:06:42

实例讲解MATLAB绘图坐标轴标签旋转

在进行绘图时需要在图片上添加上做标轴的标签，但是当数据量比较多时，例如一天24小时的数据，这时把每个小时显示在左边轴的标签上，文字内容放不下，因此需要将坐标轴标签旋转一定的角度，这样可以更好在图形上…...

编程日记 2025/5/6 13:14:25

Win10+Ubuntu20.04双系统重装Ubuntu22.04单系统

从去年 8 月美化 Ubuntu 系统后一直存在内核错误问题，但因为大部分功能还能正常使用，只是在 apt 时报错，所以一直逃避不想重装，直到最近 12 月新的开始，恰好设置的界面打不开得重装 gnome ，所以下定决心重装…...

编程日记 2025/5/5 8:58:41

eBPF：现代Linux的强大内核扩展技术

eBPF：现代Linux的强大内核扩展技术 eBPF（Extended Berkeley Packet Filter）是一项变革性的技术，它为Linux内核提供了一个灵活的、可编程的方式来处理数据包过滤、网络监控、安全性和系统性能分析等多种任务。 1. eBPF简介 1.1 …...

编程日记 2025/5/5 15:59:23

深度学习-52-AI应用实战之基于Yolo8的目标检测自动标注

文章目录 1 YOLOv81.1 YOLOV8的不同版本1.2 可检测类别1.3 数据说明1.4 网络结构1.5 算法核心步骤2 目标检测的基本原理2.1 安装yolov8(cpu版本)2.2 图片检测2.3 视频检测2.4 自动标注2.5 保存标注结果3 参考附录1 YOLOv8 YOLOv8是一种前沿的计算机视觉技术，它基于先前YOLO版…...

编程日记 2025/5/3 20:26:34

人工智能工作流程概述：从数据到智能决策

目录一、引言二、人工智能工作流程概述 （一）数据收集 （二）数据预处理 （三）模型选择与设计 （四）模型训练 （五）模型评估 （六）模…...

编程日记 2025/5/4 13:59:38

Jenkins升级到最新版本后无法启动

1. 场景还原最近在web界面将jenkins升级到最新版本后，后台无法启动jenkins服务，服务状态如下： 运行jenkins命令提示invalid Java version jenkins --version jenkins: invalid Java version: java version "1.8.0_202" Java(TM)…...

编程日记 2025/4/30 14:48:06

.net core MVC入门（三）——Product页面添加

文章目录项目地址一、Product数据库准备项目地址教程作者：教程地址： 代码仓库地址： 所用到的框架和插件： dbt airflow一、Product数据库准备添加Product的EF上下文 public DbSet<Category> Categories { get; set; …...

编程日记 2025/5/4 8:36:11

【Java基础】笔记

List和ArrayList区别 public class Arrays_BugDemo {public static void main(String[] args){/** List 是一个固定大小的列表，虽然可以进行查询操作，但不支持添加、删除或修改元素。* 如果需要一个可以动态修改的列表，可以使用 ArrayList 进…...

编程日记 2025/5/4 4:24:08

Docker 进阶指南：常用命令、最佳实践与资源管理

Docker 进阶指南：常用命令、最佳实践与资源管理 Docker 作为一种轻量级的容器化技术，已经成为现代软件开发和部署不可或缺的工具。本文将为您深入介绍 Docker 的常用命令、最佳实践以及如何有效管理容器资源，帮助您更好地在 Ubuntu 22.04 或…...

编程日记 2025/5/1 10:45:26

C++编写静态库

1、新建项目创建静态库staticLib1. demoStaticLib.h #pragma once class ArrayTool { public:int Max(const int* lpHead, const int nLength);int Sum(const int* lpHead, const int nLength); }; demoStaticLib.cpp #include "pch.h" #include "demoStati…...

编程日记 2025/5/3 23:36:18

oracle数据库日常操作

1、执行SQL语句后不显示PL/SQL procedure successfully completed set feedback off; 2、显示实例名称 echo "set sqlprompt \"_user_connect_identifier> \"" >> $ORACLE_HOME/sqlplus/admin/glogin.sql 3、客户端尝试连接到服务器时发生超时 …...

编程日记 2025/5/2 22:40:21

行驶证 OCR 识别API接口的影响因素

一、影响因素 (一)证件质量与图像质量行驶证的质量对OCR 识别 API 界面的效果有重要影响。清晰的文件可以使识别系统准确地捕获文本信息，而模糊的文本可能会导致识别错误。而且不同地区、不同年份的行驶证在字体、排版、格式等方面可能存在差异，甚至可…...

编程日记 2025/4/29 15:45:12

什么是TCP/IP和UDP

TCP/IP和UDP都是网络协议，用于不同计算机或设备之间的通信。它们的作用是定义数据如何在网络上传输，但它们在传输方式、可靠性和效率上有显著的区别。 1. TCP/IP TCP/IP（传输控制协议/互联网协议，Transmission Control Protocol…...

编程日记 2025/5/2 20:22:19

1074 Reversing Linked List (25)

Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elements on L. For example, given L being 1→2→3→4→5→6, if K3, then you must output 3→2→1→6→5→4; if K4, you must output 4→3→2→1→5→6. Input Specif…...

编程日记 2025/5/5 8:10:39

layui table 纵向滚动条导致单元格表头表体错位问题

我用的时layui2.6.8版本历史项目维护，bug给我让我做了，本来利用前端手段强解决，后来发现很多table 找了解决办法打开layui-v2.6.8/lay/modules/table.js 如果打开后时压缩的代码直接搜索 e.find(".layui-table-patch") …...

编程日记 2025/5/6 15:03:41

算法基础 - 求解非线性方程(牛顿法)

文章目录 1. 前言2. 牛顿迭代算法2.1. 基本思想2.2. 如何求解 x12.3. 如何求解 x22.4. 收敛性2.5. 编码实现2.5.1. 递归实现2.5.2. 非递归实现 1. 前言前文介绍了如何使用“高斯消元法”求解线性方程组。本文秉承有始有终的态度，继续介绍“非线性方程”的求解算法。…...

编程日记 2025/5/6 7:22:59

[C#]C#实现数字到人民币大写金额的转换

在软件开发中，将数字转换成人民币大写形式的需求通常出现在需要生成财务报表、发票、收据、账单等正式文档的场景中。这些文档往往需要遵循一定的格式和规范，以确保信息的准确性和可读性，特别是在处理与金钱相关的数据时。比如： …...

编程日记 2025/5/3 19:40:54

Base64.cv：高效安全的在线Base64转换工具详解

在日常开发中，Base64编解码是一个非常常见的需求。本文将介绍一款优秀的在线Base64转换工具：Base64.cv。工具特点 1. 性能优势采用浏览器原生API，转换速度快本地运算，无服务器延迟支持大容量文本处理 2. 安全性纯客户端处…...

编程日记 2025/5/5 9:09:18

前端面试热门题（二）[html\css\js\node\vue)

Vue 性能优化的方法 Vue 性能优化的方法多种多样，以下是一些常用的策略： 使用v-show替换v-if：v-show是通过CSS控制元素的显示与隐藏，而v-if是通过操作DOM来控制元素的显示与隐藏，频繁操作DOM会导致性能下降。因此&am…...

编程日记 2025/4/22 21:37:06

施耐德电气：多维解构AI挑战，引领产业创新变革

CSDN 看到，大模型正在掀起一场智能化革命，带来计算、开发、交互三大范式全面升级和转换，其中 AI 计算范式正在从图灵、冯诺伊曼计算范式转为神经网络计算范式。AI 技术仍在快速发展，AI 算力基础设施的数据中心如果仍走“堆资源、堆…...

编程日记 2025/5/4 17:50:12

Unity的GPU Instancing技术

首先新建一个场景，添加一个相机，并创建一个Render Texture给相机。然后在相机上挂载以下脚本TestBatches ，同时脚本的Inspector面板的Mesh中选择Cube，另外创建一个新的材质拖动给mat： public class TestBatches : M…...

编程日记 2025/4/30 19:34:39

JVM指令集概览：基础与应用

写在文章开头在现代软件开发中，Java 语言凭借其“一次编写，到处运行”的理念成为了企业级应用的首选之一。这一理念的背后支撑技术正是 Java 虚拟机（JVM）。JVM 是一个抽象的计算机，它实现了 Java 编程语言的各种特性，并且能够执行编译后的字节码文件。了解 JVM 的工作原…...

编程日记 2025/5/6 14:03:03

使用 Redis Stream 结合 Redission DelayedQueue 实现延迟消息队列（已上线生产）

一、Redis Stream 介绍 Redis Stream 是 Redis 5.0 版本新增加的数据结构，作为一种轻量级的消息队列，Redis Stream 作为一种轻量级的消息队列，适合资源有限或对性能要求较高的场景。 Redis Stream 主要用于消息队列（MQ&#xff…...

编程日记 2025/5/6 10:00:32

时频转换 | Matlab基于递归图Reccurence Plots一维数据转二维图像方法

目录基本介绍程序设计参考资料获取方式基本介绍时频转换 | Matlab基于递归图Reccurence Plots一维数据转二维图像方法程序设计 clear clc close allfs 6400 ; % 数据采样频率 N 5120; % 信号的点数% 生成时间向量 t (0:N-1) / fs; % 生成正弦信号 x sin(2 * pi * 15…...

编程日记 2025/5/1 22:28:29

《手写Spring渐进式源码实践》实践笔记 (第二十一章将ORM框架整合到Spring容器中)

文章目录第二十一章 ORM框架整合Spring背景目标设计实现代码结构类图实现步骤测试事先准备属性配置文件测试用例测试结果： 总结第二十一章 ORM框架整合Spring 背景 MyBatis-Spring 能够实现 MyBatis 与 Spring 框架的无缝集成。它使得 MyBatis 能够参与 Spring…...

编程日记 2025/5/6 12:36:29

数据库管理-第267期 23ai：Oracle Data Redaction演示（20241128）

数据库管理267期 2024-11-286 数据库管理-第267期 23ai：Oracle Data Redaction演示（20241128）1 示例表及数据2 创建编校策略2.1 名字全编校2.2 电话部分编校 3 DML演示3.1 场景13.2 场景2 总结数据库管理-第267期 23ai：Oracle Da…...

编程日记 2025/5/5 0:57:07