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

探索arkui(2)--- 布局(列表)--- 2(支持分组/实现响应滚动位置)

前端开发布局是指前端开发人员宣布他们开发的新网站或应用程序正式上线的活动。在前端开发布局中,开发人员通常会展示新网站或应用程序的设计、功能和用户体验,并向公众宣传新产品的特点和优势。前端开发布局通常是前端开发领域的重要事件,吸引了广泛的关注和关注。通过前端开发布局,开发人员可以推广他们的新产品,增加用户的关注和使用,并提高自己的品牌知名度。同时,前端开发布局也为用户提供了了解和体验新产品的机会,帮助他们更好地了解和使用新的网站或应用程序。鸿蒙开发亦是如此。

列表


官网描述 

列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列表、购物清单等)。

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem,为列表中的行或列提供单个视图,或使用ForEach迭代一组行或列,或混合任意数量的单个视图和ForEach结构,构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

我的理解 

有点类似于只有一列的表格,超出屏幕自带滚动条

代码 

import util from '@ohos.util';class Contact {key: string = util.generateRandomUUID(true);name: string;icon: Resource;constructor(name: string, icon: Resource) {this.name = name;this.icon = icon;}
}const alphabets = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K','L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];@Entry
@Component
struct ContactsList {@State selectedIndex: number = 0;@Builder itemHead(text: string) {// 列表分组的头部组件,对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}contactsGroups: object[] = [{title: 'A',contacts: [new Contact('艾佳', $r('app.media.app_icon')),new Contact('艾佳2', $r('app.media.app_icon')),new Contact('艾佳3', $r('app.media.app_icon')),new Contact('艾佳4', $r('app.media.app_icon')),new Contact('安安1', $r('app.media.app_icon')),new Contact('安安2', $r('app.media.app_icon')),new Contact('安安3', $r('app.media.app_icon')),new Contact('安安21', $r('app.media.app_icon')),new Contact('安安22', $r('app.media.app_icon')),new Contact('安安23', $r('app.media.app_icon')),new Contact('安安24', $r('app.media.app_icon')),new Contact('安安25', $r('app.media.app_icon')),new Contact('安安26', $r('app.media.app_icon')),new Contact('安安27', $r('app.media.app_icon')),new Contact('安安37', $r('app.media.app_icon')),new Contact('安安47', $r('app.media.app_icon')),new Contact('安安57', $r('app.media.app_icon')),new Contact('Angela', $r('app.media.app_icon')),new Contact('Angela2', $r('app.media.app_icon')),new Contact('Angela3', $r('app.media.app_icon')),new Contact('Angela4', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),new Contact('Angela5', $r('app.media.app_icon')),],},{title: 'B',contacts: [new Contact('白叶', $r('app.media.app_icon')),new Contact('伯明', $r('app.media.app_icon')),new Contact('伯明2', $r('app.media.app_icon')),new Contact('伯明3', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),new Contact('伯明4', $r('app.media.app_icon')),],},]private listScroller: Scroller = new Scroller();build() {Stack({ alignContent: Alignment.End }) {List() {ForEach(this.contactsGroups, item => {ListItemGroup({ header: this.itemHead(item.title) }) {ForEach(item.contacts, contact => {ListItem() {Row() {Image(contact.icon).width(40).height(40).margin(10)Text(contact.name).fontSize(20)}}}, item => item.key)}})}.onScrollIndex((firstIndex: number) => {this.selectedIndex = firstIndex + 1}).divider({strokeWidth: 1,startMargin: 60,endMargin: 10,color: '#ffe9f0f0'}).scrollBar(BarState.Auto).sticky(StickyStyle.Header)AlphabetIndexer({ arrayValue: alphabets, selected: 0 }).selected(this.selectedIndex)}}
}

效果

相关文章:

探索arkui(2)--- 布局(列表)--- 2(支持分组/实现响应滚动位置)

前端开发布局是指前端开发人员宣布他们开发的新网站或应用程序正式上线的活动。在前端开发布局中,开发人员通常会展示新网站或应用程序的设计、功能和用户体验,并向公众宣传新产品的特点和优势。前端开发布局通常是前端开发领域的重要事件,吸…...

systemverilog:interface中端口方向理解

(1)从testbench的角度看,tb中信号的输入输出方向与interface中信号输入输出方向一致: (2)从DUT角度看,DUT中信号输入输出方向与interface中信号输入输出方向相反。简单图示如下: 代…...

【GUI】-- 08 JButton、JRadioButton、JCheckBox

GUI编程 03 Swing 3.5 JButton 图片置于按钮之上的JButton: package com.duo.lesson05;import javax.swing.*; import java.awt.*; import java.net.URL;public class JButtonDemo01 extends JFrame {public JButtonDemo01() {Container contentPane getConten…...

【postgresql】CentOS7 安装Pgweb

Pgweb Pgweb是PostgreSQL的一个基于web的数据库浏览器,用Go编写,可在Mac、Linux和Windows机器上运行。以零依赖性的简单二进制形式分布。非常易于使用,并具有适当数量的功能。简单的基于web和跨平台的PostgreSQL数据库浏览器。 特点 跨平台…...

基于python和定向爬虫的商品比价系统

论文下载 基于python和定向爬虫的商品比价系统 Price Comparison System for Products Based on Python and Targeted Web Crawling 目录 目录 2 摘要 3 关键词 3 第一章 绪论 4 1.1 研究背景 4 1.2 研究意义 5 1.3 国内外研究现状 7 1.4 本文主要工作和章节安排 8 …...

使用GPT-4训练数据微调GPT-3.5 RAG管道

原文:使用GPT-4训练数据微调GPT-3.5 RAG管道 - 知乎 OpenAI在2023年8月22日宣布,现在可以对GPT-3.5 Turbo进行微调了。也就是说,我们可以自定义自己的模型了。然后LlamaIndex就发布了0.8.7版本,集成了微调OpenAI gpt-3.5 turbo的…...

二十三种设计模式全面解析-深入解析模板方法模式的奇妙世界

在软件设计的奇妙宇宙中,有一种设计模式如一颗流星般划过,留下绚丽的光芒,它就是——模板方法模式(Template Method Pattern)。这个模式不仅令代码更加灵活,而且蕴含了一种设计哲学,本文将深入研…...

【Spring】加载properties文件

文章目录 在Spring Context中加载properties文件测试总结 在Spring Context中加载properties文件 分为三步&#xff0c;如下图所示&#xff1a; 完整代码&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.…...

react中间件的理解

一、是什么&#xff1f; 中间件&#xff08;Middleware&#xff09;在计算机中&#xff0c;是介于应用系统和系统软件之间的一类软件&#xff0c;它使用系统软件所提供的基础服务&#xff08;功能&#xff09;&#xff0c;衔接网络应用上的各个部分或不同的应用&#xff0c;能…...

React函数组件状态Hook—useState《进阶-对象数组》

React函数组件状态-state 对象 state state 中可以保存任意类型的 JavaScript 值&#xff0c;包括对象。但是&#xff0c;你不应该直接修改存放在 React state 中的对象。相反&#xff0c;当你想要更新⼀个对象时&#xff0c;你需要创建⼀个新的对象&#xff08;或者将其拷⻉⼀…...

linux 网络 cat /proc/net/dev 查看测试网络丢包情况

可以通过 cat /proc/net/dev 查看测试网络丢包情况&#xff0c;drop关键字&#xff0c;查看所有网卡的丢包情况 还可以看其他数据&#xff0c; /proc/net/下面有如下文件...

记录配置VS,使用opencv与Eigen

方法一&#xff1a; 1.下载VS 2.配置opencv,参考大佬博客&#xff0c;注意更改博客中版本的部分细节&#xff0c;比如opencv_world440d.lib换成自己下载的版本 3.配置Eigen,参考大佬博客 方法二&#xff1a;博客 本人第一次配置时候按照这篇内容配置的&#xff0c;但是不知道哪…...

uart控制led与beep

仲裁模块代码&#xff1a; // 外设控制模块&#xff0c;根据uart接收到的数据&#xff0c;控制led与beep的标志信号。 module arbit(input wire sys_clk ,input wire sys_rst_n ,input wire pi_flag …...

Linux修改root密码

如果知道当前的root密码&#xff0c;修改boot密码操作较简单。 步骤如下&#xff1a; # passwd --在root用户下执行passwd命令 Changing password for user root. New password: --此处输入新密码 BAD PASSWORD: The password is shorter than 8 characters Ret…...

C/C++模板类模板与函数模板区别,以及用法详解

类模板 类模板语法 类模板作用&#xff1a; 建立一个通用类&#xff0c;类中的成员 数据类型可以不具体制定&#xff0c;用一个虚拟的类型来代表。 语法&#xff1a; template<typename T> 类解释&#xff1a; template --- 声明创建模板 typename --- 表面其后面的…...

van-dialog弹窗异步关闭-校验表单

van-dialog弹窗异步关闭 有时候我们需要通过弹窗去处理表单数据&#xff0c;在原生微信小程序配合vant组件中有多种方式实现&#xff0c;其中UI美观度最高的就是通过van-dialog嵌套表单实现。 通常表单涉及到是否必填&#xff0c;在van-dialog的确认事件中直接return是无法阻止…...

Dynamic Wallpaper 16.7中文版

Macos动态壁纸推荐&#xff1a; Dynamic Wallpaper是一款Mac平台上的动态壁纸应用程序&#xff0c;它可以根据时间等因素动态切换壁纸&#xff0c;提供更加生动和多样化的桌面体验。 Dynamic Wallpaper包含了多个动态壁纸&#xff0c;用户可以根据自己的喜好选择和切换。这些…...

​如何使用ArcGIS Pro制作渐变河流效果

对于面要素的河流水系&#xff0c;制作渐变效果方法比较简单&#xff0c;如果是线要素的河流有办法制作渐变效果吗&#xff0c;答案是肯定的&#xff0c;这里为大家介绍一下制作方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图中下载的水系数…...

《网络协议》06. HTTP 补充 · HTTPS · SSL/TLS

title: 《网络协议》06. HTTP 补充 HTTPS SSL/TLS date: 2022-10-06 18:09:55 updated: 2023-11-15 07:53:52 categories: 学习记录&#xff1a;网络协议 excerpt: HTTP/1.1 协议的不足、HTTP/2、HTTP/3、HTTP 协议的安全问题、SPDY、HTTPS、SSL/TLS、OpenSSL。 comments: fa…...

Python winreg将cmd/PowerShell(管理员)添加到右键菜单

效果 1. 脚本 用管理员权限运行&#xff0c;重复执行会起到覆盖效果&#xff08;根据sub_key&#xff09;。 icon自己设置。text可以自定义。sub_key可以改但不推荐&#xff08;避免改成和系统已有项冲突的&#xff09;。command不要改。 from winreg import *registry r&q…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...