HarmonyOS：使用List实现分组列表（包含粘性标题）
一、支持分组列表
在列表中支持数据的分组展示，可以使列表显示结构清晰，查找方便，从而提高使用效率。分组列表在实际应用中十分常见，如下图所示联系人列表。
联系人分组列表
在List组件中使用ListItemGroup对项目进行分组，可以构建二维列表。
在List组件中可以直接使用一个或者多个ListItemGroup组件，ListItemGroup的宽度默认充满List组件。在初始化ListItemGroup时，可通过header参数设置列表分组的头部组件。
@Entry
@Component
struct ContactsList {@Builder itemHead(text: string) {// 列表分组的头部组件，对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}build() {List() {ListItemGroup({ header: this.itemHead('A') }) {// 循环渲染分组A的ListItem}ListItemGroup({ header: this.itemHead('B') }) {// 循环渲染分组B的ListItem}}}
}
如果多个ListItemGroup结构类似，可以将多个分组的数据组成数组，然后使用ForEach对多个分组进行循环渲染。例如在联系人列表中，将每个分组的联系人数据contacts和对应分组的标题title数据进行组合，定义为数组contactsGroups。然后在ForEach中对contactsGroups进行循环渲染，即可实现多个分组的联系人列表。可参考添加粘性标题示例代码。
二、添加粘性标题
粘性标题是一种常见的标题模式，常用于定位字母列表的头部元素。如下图所示，在联系人列表中滚动A部分时，B部分开始的头部元素始终处于A的下方。而在开始滚动B部分时，B的头部会固定在屏幕顶部，直到所有B的项均完成滚动后，才被后面的头部替代。
粘性标题不仅有助于阐明列表中数据的表示形式和用途，还可以帮助用户在大量信息中进行数据定位，从而避免用户在标题所在的表的顶部与感兴趣区域之间反复滚动。
粘性标题–联系人分组列表
List组件的sticky属性配合ListItemGroup组件使用，用于设置ListItemGroup中的头部组件是否呈现吸顶效果或者尾部组件是否呈现吸底效果。
通过给List组件设置sticky属性为StickyStyle.Header，即可实现列表的粘性标题效果。如果需要支持吸底效果，可以通过footer参数初始化ListItemGroup的底部组件，并将sticky属性设置为StickyStyle.Footer。
三、完整示例代码
TestContactsList.ets
import { util } from '@kit.ArkTS'class Contact {contactkey: string = util.generateRandomUUID(true);name: string;avatar: Resource;constructor(name: string, avatar: Resource) {this.name = name;this.avatar = avatar;}
}class ContactsGroup {title: string = '';key: string = '';contacts: Array<object> | null = null;
}let contactsGroups: object[] = [{title: 'A',key: util.generateRandomUUID(true),contacts: [new Contact('Andy', $r('app.media.circle')),new Contact('安沃', $r('app.media.circle')),new Contact('昂科1', $r('app.media.circle')),new Contact('昂科2', $r('app.media.circle')),new Contact('昂科3', $r('app.media.circle')),]} as ContactsGroup,{title: 'B',key: util.generateRandomUUID(true),contacts: [new Contact('Ben', $r('app.media.circle')),new Contact('蹦高', $r('app.media.circle')),new Contact('巴掌1', $r('app.media.circle')),new Contact('巴掌2', $r('app.media.circle')),]} as ContactsGroup,{title: 'C',key: util.generateRandomUUID(true),contacts: [new Contact('ChenL', $r('app.media.circle')),new Contact('成才', $r('app.media.circle')),new Contact('程程1', $r('app.media.circle')),new Contact('程程2', $r('app.media.circle')),new Contact('程程3', $r('app.media.circle')),new Contact('程程4', $r('app.media.circle')),]} as ContactsGroup,{title: 'D',key: util.generateRandomUUID(true),contacts: [new Contact('DIba', $r('app.media.circle')),new Contact('迪迪1', $r('app.media.circle')),new Contact('迪迪2', $r('app.media.circle')),new Contact('迪迪3', $r('app.media.circle')),]} as ContactsGroup
]@Component
struct ItemContact {@Prop item: Contactbuild() {Row({ space: 10 }) {Image(this.item.avatar).width('50vp').height('50vp')Text(this.item.name).fontSize(20).fontColor(Color.Black).ellipsisMode(EllipsisMode.END).maxLines(1)}.width('100%').margin({ top: 16, bottom: 10 }).padding({ left: 16 }).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Start)}
}@Entry
@Component
struct TestContactsList {@State message: string = '分组列表';// 定义分组联系人数据集合contactsGroups数组@BuilderitemHead(text: string) {// 列表分组的头部组件，对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}build() {Column({ space: 10 }) {Text(this.message).id('TestContactsListHelloWorld').fontSize(20).fontWeight(FontWeight.Bold)List() {ForEach(contactsGroups, (itemGroup: ContactsGroup) => {ListItemGroup({ header: this.itemHead(itemGroup.title) }) {if (itemGroup.contacts) {ForEach(itemGroup.contacts, (contact: Contact) => {ListItem() {ItemContact({ item: contact })}}, (item: Contact) => JSON.stringify(item))}}}, (itemGroup: ContactsGroup) => JSON.stringify(itemGroup))}.sticky(StickyStyle.Header).scrollBar(BarState.Auto)}}
}
相关文章：
HarmonyOS：使用List实现分组列表（包含粘性标题）
一、支持分组列表 在列表中支持数据的分组展示，可以使列表显示结构清晰，查找方便，从而提高使用效率。分组列表在实际应用中十分常见，如下图所示联系人列表。 联系人分组列表 在List组件中使用ListItemGroup对项目进行分组&#…...
纪念日倒数日项目的实现-【纪念时刻-时光集】
纪念日/倒数日项目的实现## 一个练手的小项目，uniappnodemysql七牛云。 在如今快节奏的生活里，大家都忙忙碌碌，那些具有特殊意义的日子一不小心就容易被遗忘。今天，想给各位分享一个“纪念日”项目。 【纪念时刻-时光集】 一…...
Kafka知识点总结
一、概述 ￥1. 推拉模式 pull（拉）模式：consumer采用从broker中主动拉取数据，不足之处是如果没有数据，消费者可能会陷入循环中，一直返回空数据。push（推）模式：…...
[AI]从零开始的llama.cpp部署与DeepSeek格式转换、量化、运行教程
一、前言 在上一次的DeepSeek的部署教程中，我们使用Ollama与LM Studio很轻松的部署了DeepSeek并且也完成了相关API的调用，如果还有不会的小伙伴请看下面的教程： DeepSeek本地部署：[AI]从零开始的DeepSeek本地部署及本地API调用教…...
#define宏与编译时定义的本质对决：从const常量到typedef的类型安全演进
目录 一、#define宏与const常量的本质差异：从文本替换到类型安全的编程抉择 1. 预处理阶段的文本替换（#define） 2. 编译时的类型安全（const） 3. 跨文件访问的限制 4. 代码示例对比 5. 最佳实践 总结表 二、类型…...
【天地图】绘制、删除点线面
使用天地图绘制、删除点线面 实现效果图地图组件完整代码使用地图组件完整代码 实现效果图 地图组件完整代码 // 天地图组件 <template><div class"map-container"><div id"mapCon"></div></div> </template><scri…...
2025年：边缘计算崛起下运维应对新架构挑战
一、引言 随着科技的飞速发展，2025年边缘计算正以前所未有的速度崛起，给运维行业带来了全新的架构挑战。在这个充满机遇与挑战的时代，美信时代公司的美信监控易运维管理软件成为运维领域应对这些挑战的有力武器。 二、边缘计算崛起带来的运维…...
【docker知识】快速找出服务器中占用内存较高的容器
本文由Markdown语法编辑器编辑完成。 1.背景： 近期在处理现场问题，观察服务器时，会遇到某些进程占用较高内存的情况。由于我们的服务，基本上都是以容器的方式在运行，因此就需要找到，到底是哪个容器&#…...
SQL联合查询
文章目录 MySQL系列：1.内连接2.外连接3.自连接4.子查询5.合并查询6.插入查询 MySQL系列： 初识MySQL，MySQL常用数据类型和表的操作，增删改查(CRUD)操作(总),数据库约束数据库设计 #班级表 drop table if exists class; create ta…...
cameralib 安装
目录 linux安装： 测试安装是否成功： linux安装： pip install githttps://github.com/isarandi/cameralib.git pip install githttps://github.com/isarandi/boxlib.git pip install githttps://github.com/isarandi/poseviz.git githttps…...
Windows软件自动化利器：pywinauto python
Pywinauto WindowsAPP UI自动化 Windows软件自动化利器：pywinauto python...
清华大学《DeepSeek：从入门到精通》
近日，清华大学新闻与传播学院新媒体研究中心元宇宙文化实验室发布了由余梦珑博士后及其团队撰写的《DeepSeek：从入门到精通》手册。这份长达104页的指南，旨在帮助用户全面掌握国产通用人工智能平台DeepSeek的核心功能与应用技巧。 DeepSeek简…...
网易易盾接入DeepSeek，数字内容安全“智”理能力全面升级
今年农历新年期间，全球AI领域再度掀起了一波革命性浪潮，国产通用大模型DeepSeek凭借其强大的多场景理解与内容生成能力迅速“出圈”，彻底改写全球人工智能产业的格局。 作为国内领先的数字内容风控服务商，网易易盾一直致力于探索…...
天童美语：观察你的生活
在孩子的认知里，世界宛如一片充满神秘色彩的未知之境，有着无尽的奥秘等待他们去探索。家长们，引导孩子用心观察世界，领略其中的美妙，这对孩子的成长进程有着极为关键的作用。贵阳天童教育相信：观察生活&…...
易仓科技ai面试
请解释PHP中的面向对象编程的基本概念，并举例说明如何在PHP中定义一个类。 回答思路：需理解类、对象、继承和多态等基本概念，并能通过实例代码展示如何定义类及其属性和方法。 . 类（Class） 类是一个封装了数据和操作…...
MySQL-SQL
1.客户端内置命令 客户端内置命令客户端独有，可能不同数据库产品的客户端内置命令存在很大差异，不像SQL命令有标准规范。 help \h ? \? 这四个命令都可以输出帮助文档查看客户端内置命令 ？（\？）“帮助”…...
基础连接已经关闭: 服务器关闭了本应保持活动状态的连接
您在进行 HTTP 请求时遇到“基础连接已经关闭: 服务器关闭了本应保持活动状态的连接”的错误，这通常与连接的保持活动（Keep-Alive）设置有关。以下是可能的原因和解决方法： 可能的原因： Keep-Alive 设置： 默…...
【React组件通讯双重视角】函数式 vs 类式开发指南
目录 前言 正文 父组件向子组件传值 函数式写法 类式写法 子组件向父组件传值 函数式写法 类式写法 兄弟组件通信 函数式写法 类式写法 跨层级通信（使用Context） 函数式写法 类式写法 进阶通讯方式（补充说明…...
开源项目Perplexica-master
一个和https://www.perplexity.ai/差不多的开源项目 大模型的key可以用groq的，免费（https://console.groq.com/keys），有速率限制 项目clone后，修改配置，项目根目录config.toml 填写对应的大模型的key就行…...
数值积分：通过复合梯形法计算
在物理学和工程学中，很多问题都可以通过数值积分来求解，特别是当我们无法得到解析解时。数值积分是通过计算积分区间内离散点的函数值来近似积分的结果。在这篇博客中，我将讨论如何使用 复合梯形法 来进行数值积分，并以一个简单的…...
DeepSeek全生态接入指南：官方通道+三大云平台
DeepSeek全生态接入指南：官方通道三大云平台 一、官方资源入口 1.1 核心交互平台 🖥️ DeepSeek官网： https://chat.deepseek.com/ （体验最新对话模型能力） 二、客户端工具 OllamaChatboxCherry StudioAnythingLLM …...
shell脚本的一些学习笔记----（三）流程控制
1.条件判断 if单条件判断 if [ 条件判断式 ] then 语句块 fi 案例1：统计根分区使用率 [rootlocalhost ~]$ vi sh/if1.sh #!/bin/bash #把根分区使用率作为变量值赋予变量rate rate$(df -h | grep "/dev/sda1" | awk {print $5}’| cut -d "%"-f…...
Docker Desktop WebAPI《1》
方法1 》》生成 的文档不要动， 》》执行 Container（Dockerfile） 会生成镜像文件和容器 》》生成的镜像和容器 在 Docker Desktop 中可以查看 用VS 的 Container Dockerfile 调试 但把这个调试工工具 停止，WebAPi就不能访问了 …...
Linux驱动层学习：LED 驱动开发
前置知识： 1、地址映射 MMU 全称叫做 Memory Manage Unit，也就是内存管理单元。 MMU 主要完成的功能如下： ①、完成虚拟空间到物理空间的映射。 ②、内存保护，设置存储器的访问权限，设置虚拟存储空间的缓冲特性。 第…...
全面解析鸿蒙（HarmonyOS）开发：从入门到实战，构建万物互联新时代
文章目录 引言 一、鸿蒙操作系统概述二、鸿蒙开发环境搭建三、鸿蒙核心开发技术1. **ArkUI框架**2. **分布式能力开发**3. **原子化服务与元服务** 四、实战案例：构建分布式音乐播放器五、鸿蒙开发工具与调试技巧六、鸿蒙生态与未来展望结语 引言 随着万物互联时代…...
zyNo.23
SQL注入漏洞 1.SQL语句基础知识 一个数据库由多个表空间组成，sql注入关系到关系型数据库，常见的关系型数据库有MySQL,Postgres,SQLServer,Oracle等 以Mysql为例，输入 mysql-u用户名-p密码 即可登录到MySQL交互式命令行界面。 既然是…...
调用DeepSeek API接口：实现智能数据挖掘与分析
在当今数据驱动的时代，企业和开发者越来越依赖高效的数据挖掘与分析工具来获取有价值的洞察。DeepSeek作为一款先进的智能数据挖掘平台，提供了强大的API接口，帮助用户轻松集成其功能到自己的应用中。本文将详细介绍如何调用DeepSeek API接口&…...
【Linux】Ubuntu Linux 系统——Node.js 开发环境
ℹ️大家好，我是练小杰，今天星期五了，同时也是2025年的情人节，今晚又是一个人的举个爪子！！ 🙂 本文是有关Linux 操作系统中 Node.js 开发环境基础知识，后续我将添加更多相关知识噢&a…...
Redis7——基础篇（一）
前言：此篇文章系本人学习过程中记录下来的笔记，里面难免会有不少欠缺的地方，诚心期待大家多多给予指教。 基础篇： Redis（一） 一、Redis定义 官网地址：Redis - The Real-time Data Platform R…...
MySQL查看存储过程和存储函数
【图书推荐】《MySQL 9从入门到性能优化（视频教学版）》-CSDN博客 《MySQL 9从入门到性能优化（视频教学版）（数据库技术丛书）》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了…...
js实现点击音频实现播放功能
目录 1. HTML 部分：音频播放控件 2. CSS 部分：样式设置 3. JavaScript 部分：音频控制 播放和暂停音频： 倒计时更新： 播放结束后自动暂停： 4. 总结： 完整代码： 今天通过 HTML…...
Ubuntu安装docker：docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli
具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意，选中 docker-desktop 而非 ./docker-desktop-amd64.de…...
免费deepseek的API获取教程及将API接入word或WPS中
免费deepseek的API获取教程: 1 https://cloud.siliconflow.cn/中注册时填写邀请码：GAejkK6X即可获取2000 万 Tokens; 2 按照图中步骤进行操作 将API接入word或WPS中 1 打开一个word，文件-选项-自定义功能区-勾选开发工具-左侧的信任中心-信任中心设置…...
华为交换机堆叠配置
华为交换机堆叠（Stack）技术是一种将多台物理交换机虚拟化为单一逻辑设备的高可靠性解决方案，可简化网络管理、提升带宽利用率并增强冗余能力。 一、堆叠的核心概念 堆叠系统组成：主交换机（Master）…...
基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现
基于Java SpringBoot以及vue前后端分离的旅游景区网站系统设计与实现 本项目是一款基于Spring Boot和Vue.js开发的旅游景区管理系统，前端合后端的架构，支持用户在线浏览景区信息、预订门票，并提供完善的后台管理功能，包括订单管理…...
DeepSeek教unity------MessagePack-04
Union 联合 MessagePack for C# 支持序列化接口类型和抽象类类型的对象。它的行为类似于 XmlInclude 或 ProtoInclude。在 MessagePack for C# 中，这些被称为Union。只有接口和抽象类可以被 Union 属性注解。需要唯一的联合键。 /******************************…...
侯捷 C++ 课程学习笔记：C++ 新标准 11/14 的革新与实战应用
在侯捷老师的 C 系列课程中，《C 新标准 11/14》这门课程让我对现代 C 编程有了全新的认识。C11 和 C14 是 C 语言发展史上的重要里程碑，它们引入了大量新特性，极大地提升了语言的表达能力和开发效率。侯捷老师通过深入浅出的讲解和丰富的实战…...
MATLAB图像处理：Sobel、Roberts、Canny等边缘检测算子
边缘是图像中像素值剧烈变化的区域，反映了目标的轮廓、纹理等关键信息。边缘检测是图像分割、目标识别等任务的基础。本文将系统解析 六种经典边缘检测算子 的数学原理、实现方法及适用场景，并给出完整的MATLAB代码示例和对比分析。 1. 边缘检测基础 1…...
Python Pandas（7）：Pandas 数据清洗
数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况，如果要使数据分析更加准确，就需要对这些没有用的数据进行处理。数据清洗与预处理的常见步骤： 缺失值处理：识别并…...
基于javaweb的SpringBootoa办公自动化系统设计和实现(源码+文档+部署讲解）
🎬 秋野酱：《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 运行环境开发工具适用功能说明部分代码展示 运行环境 Java≥8、MySQL≥5.7 开发工具 eclipse/idea/myeclipse/sts等均可配置运行…...
算法08-递归调用转为循环的通用方法
前导：问题引入 在Python中，递归调用过多会导致“递归深度过深”的错误，通常是因为递归没有正确终止条件或者递归层次太深。 这种错误通常会导致程序抛出 RecursionError 异常。 Python默认的递归深度限制大约是1000层（可以通过sys.getrecursionlimit()查看）。 修正方式…...
+copilot进行QtWidgetsApplication源码解析)
[qt5学习笔记]用vs2022(msvc2017)+copilot进行QtWidgetsApplication源码解析
一直没深入了解qt，又一段时间没写qt，重新捡起来。 开发环境 本地vs2022(msvc2017, v14.30)先升级到最新版本，方便使用copilot。 参考 VS2022QT5环境搭建 下载 qt5.14.2 用vs的qt插件设置qt5.14.2x86路径，x64版本未安装。 创建一…...
Nginx--日志（介绍、配置、日志轮转）
前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除 一、Nginx日志介绍 nginx 有一个非常灵活的日志记录模式，每个级别的配置可以有各自独立的访问日志, 所需日志模块 ngx_http_log_module 的…...
Transformer 模型介绍（一）——综述
Transformer 是一种完全基于注意力机制的神经网络模型，首次在2017年的论文《Attention Is All You Need》中提出。该模型最初用于机器翻译任务，并在特定任务中表现优于谷歌的其他神经网络机器翻译模型。Transformer 也是 Seq2Seq（序列到序列&…...
Ceph集群搭建2025（squid版）
squid版本维护年限 apt install -y cephadmecho >> "deb http://mirrors.163.com/ceph/debian-squid/ bookworm main" echo >> "deb-src http://mirrors.163.com/ceph/debian-squid/ bookworm main"#安装源 cephadm install #开始初始化一个最…...
封装neo4j的持久层和服务层
目录 持久层 mp 模仿： 1.抽取出通用的接口类 2.创建自定义的repository接口 服务层 mp 模仿： 1.抽取出一个IService通用服务类 2.创建ServiceImpl类实现IService接口 3.自定义的服务接口 4.创建自定义的服务类 工厂模式 为什么可以使用工厂…...
HTML 简介
1.什么是 HTML？ 超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。 标 记：文本要变成超文本，就需要用到各种标记符号。 语 言：每一个标记的写法、读音、使用规则，…...
【AWS】EC2 安全组设置
在使用 Amazon Web Services (AWS) 的 EC2 实例时，很多用户会遇到关于 安全组 设置的问题，尤其是在创建或修改安全组时输入描述信息时。最近，有一个常见的错误是当用户在 EC2 安全组 配置中添加描述时，使用了中文字符，…...
git bisect 使用二分法查找引入错误的提交
git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误 使用该命令时，首先告诉它一个已知包含错误的 “坏” 提交 以及一个已知在错误出现之前的 “好” 提交 然后 git b…...
STM32 Flash详解教程文章
目录 Flash基本概念理解 Flash编程接口FPEC Flash擦除/写入流程图 Flash选项字节基本概念理解 Flash电子签名 函数读取地址下存放的数据 Flash的数据处理限制部分 编写不易，请勿搬运，感谢理解！！！ Flash基本概念…...