探索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)}}
}

效果

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

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

相关文章

Unity中Shader矩阵的转置矩阵

Unity中Shader矩阵的转置矩阵

文章目录 前言一、转置的表示二、转置矩阵三、转置矩阵的总结1、(A^T^)^T^ A2、(A B)^T^ A^T^ B^T^3、(kA)^T^ kA^T^ (k为实数)4、(AB)^T^ B^T^A^T^5、如果 A A^T^ 则称A为对称矩阵6、如果 AA^T^ I(单位矩阵)，则称 A 为正交矩阵，同时 A^T^ A^-1…
阅读更多...
Python与ArcGIS系列（八）通过python执行地理处理工具

Python与ArcGIS系列（八）通过python执行地理处理工具

目录 0 简述1 脚本执行地理处理工具2 在地理处理工具间建立联系0 简述 arcgis包含数百种可以通过python脚本执行的地理处理工具，这样就通过python可以处理复杂的工作和批处理。本篇将介绍如何利用arcpy实现执行地理处理工具以及在地理处理工具间建立联系。 1 脚本执行地理处理…
阅读更多...
【Vue配置项】 computed计算属性 | watch侦听属性

【Vue配置项】 computed计算属性 | watch侦听属性

目录 前言 computed计算属性 什么是计算属性？ Vue的原有属性是什么？ 得到的全新的属性是什么？ 计算属性怎么用？ 计算属性的作用是什么？ 为什么说代码执行率高了？ computed计算属性中的this指向 co…
阅读更多...
CCNA课程实验-14-Final_Lab

CCNA课程实验-14-Final_Lab

目录 实验条件网络拓朴需求 配置实现1. 配置PC1~3, DHCP_Server的vlan2. VLAN10、20的网关为MSW1对应的SVI，VLAN30、40的网关为MSW2对应的SVI；3. 配置5台交换机之间线路均为Trunk4. 配置5台交换机均启用Rapid-PVST(RSTP)5. 配置DHCP Server，创…
阅读更多...
Django模板层

Django模板层

模板之变量 所有的数据类型都可以在模板中使用 render(request, index.html, context{}) render(request, index.html, contextlocals()) """在模板中使用变量的时候，用的是字典的key值，key值value值一般保持一致"""详细…
阅读更多...
Redis：详解5大数据类型及其常用命令

Redis：详解5大数据类型及其常用命令

目录 Redis键（key）字符串（String）简介常用命令数据结构简介常用命令 列表（List）简介常用命令数据结构 集合（Set）简介常用命令数据结构 哈希（Hash）简介常用命令…
阅读更多...
计算机网络五层协议的体系结构

计算机网络五层协议的体系结构

计算机网络中两个端系统之间的通信太复杂，因此把需要问题分而治之，通过把一次通信过程中涉及的所有问题分层归类来进行研究和处理 体系结构是抽象的，实现是真正在运行的软件和硬件 1.实体、协议、服务和服务访问点 协议必须把所有不利条件和…
阅读更多...
vue3+vite+ts 发布自定义组件到npm

vue3+vite+ts 发布自定义组件到npm

vue3vite 发布自定义组件到npm 初始化项目编写组件配置打包组件上传到npm测试组件库 初始化项目 // 创建项目 pnpm create vite vue-test-app --template vue-ts// 运行项目 cd vite vue-test-app pnpm install pnpm run dev编写组件 1、根目录下创建packages目录作为组件的开…
阅读更多...
talbay---贝叶斯网络分析工具产品介绍

talbay---贝叶斯网络分析工具产品介绍

一 简介 talbay是拥有独立知识产权的国产软件，主要功能是贝叶斯网络建模、决策网络建模、概率计算、决策支持、敏感性分析、网络模型验证、机器学习等。talbay以用户为中心，简单易用, 计算准确高效，分析全面多样，在应用成熟理论及…
阅读更多...
Linux系统中如何开启和配置OpenGauss数据库的远程连接(1)

Linux系统中如何开启和配置OpenGauss数据库的远程连接(1)

文章目录 前言1. Linux 安装 openGauss2. Linux 安装cpolar3. 创建openGauss主节点端口号公网地址4. 远程连接openGauss5. 固定连接TCP公网地址6. 固定地址连接测试 前言 openGauss是一款开源关系型数据库管理系统，采用木兰宽松许可证v2发行。openGauss内核深度融合…
阅读更多...
Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板

Mars3d-vue最简项目模板集成使用Mars3d的UI控件样板

备注说明&#xff1a; 1.小白可看步骤一二&#xff0c;进阶小白可直接看步骤三 步骤一&#xff1a;新建文件夹<uitest>&#xff0c;在mars3d仓库拉一份最简项目模板&#xff1a; git clone mars3d-vue-template: Vue3.x 技术栈下的Mars3D项目模板 步骤二&#xff1a;运…
阅读更多...
kubernetes部署jenkins

kubernetes部署jenkins

参考&#xff1a;kubernetes 部署 Jenkins jenkins kubernetes pipeline_mob64ca14116c53的技术博客_51CTO博客 第七篇&#xff1a;kubernetes部署jenkins-CSDN博客 1、当前kubernetes集群已部署nfs服务 showmount -e 创建jenkins目录 2、添加jenkins的pvc kubectl create …
阅读更多...
IP-guard flexpaper远程命令执行漏洞复现 [附POC]

IP-guard flexpaper远程命令执行漏洞复现 [附POC]

文章目录 IP-guard flexpaper RCE漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 IP-guard flexpaper RCE漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…
阅读更多...
快速使用vscode写python

快速使用vscode写python

1.打开vscode&#xff0c;打开扩展&#xff0c;输入python&#xff0c;点击安装。 2.下载python。官网下载太慢&#xff0c;通过镜像下载。 http://npm.taobao.org/mirrors/python/3.9.0/ 下载python-3.9.0-amd64.exe 3.下载好后安装python&#xff0c;下方的add python to p…
阅读更多...
WebSocket真实项目总结

WebSocket真实项目总结

websocket 使用websocket达成的效果&#xff1a; websocket是什么? websocket是一种网络通讯协议。 websocket 是HTML5开始提供的一种在单个TCP链接上进行全双工通讯的协议。 为什么需要websocket? 初次接触websocket&#xff0c;都会带着疑惑去学习&#xff0c;既然已经有了…
阅读更多...
CSS样式穿透

CSS样式穿透

当我们在vue项目中使用第三方组件时&#xff0c;有时候需要去修改某些元素的样式&#xff0c;但有时写的css样式不会覆盖组件的样式&#xff0c;所以要用到样式穿透。 常用的方法有这几种&#xff1a;&#xff08;1&#xff09;>>> &#xff08;2&#xff09;/deep/ …
阅读更多...
OpenHarmony Promise详解

OpenHarmony Promise详解

一&#xff0c;定义 作为一个android开发人员&#xff0c;刚接触Promise可能不好理解&#xff0c;因为android中的异步操作都是开启线程操作或者kotlin的协程&#xff0c;但是Promise并不是单独去开启一个线程来处理异步任务&#xff0c;它是在同一个线程中去处理异步任务。异…
阅读更多...
实际使用Elasticdump工具对Elasticsearch集群进行数据备份和数据还原

实际使用Elasticdump工具对Elasticsearch集群进行数据备份和数据还原

文/朱季谦 目录一、Elasticdump工具介绍二、Elasticdump工具安装三、Elasticdump工具使用 最近在开发当中做了一些涉及到Elasticsearch映射结构及数据导出导入的工作&#xff0c;怕以后会把这过程忘记&#xff0c;可谓好记性不如烂笔头&#xff0c;故而记录成一篇博文。 玩El…
阅读更多...
Unity Text文本首行缩进两个字符的方法

Unity Text文本首行缩进两个字符的方法

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 参考如下代码&#xff1a; TMPtext1.text "\u3000\u3000" "这是一段有首行缩进的文本内容。\n这是第二行"; 运行效果如下图所示&#xff1a; 虽…
阅读更多...
【代码随想录】算法训练计划21、22

【代码随想录】算法训练计划21、22

day 21 1、530. 二叉搜索树的最小绝对差 题目&#xff1a; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 思路&#xff1a; 利用了二叉搜索树的中序遍历特性用了双指…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023