【Harmony3.1/4.0】笔记二-列表

2024-04-26 14:44
文章标签 笔记 列表 4.0 harmony3.1

本文主要是介绍【Harmony3.1/4.0】笔记二-列表，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概述

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

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

列表的综合学习

代码如下


import util from '@ohos.util'
//创建实体类联系人
class Contact{key:string=util.generateRandomUUID(true); //随机生成UUIDname:string;icon:Resource;icon1:Resource=$r("app.media.img21");//定义构造方法constructor(name:string,icon:Resource) {this.name=name;this.icon=icon;}
}@Entry
@Component
struct Two{private  icons:Resource[]=[$r("app.media.img1"),$r("app.media.img2"),$r("app.media.img3"),$r("app.media.img4"),$r("app.media.img5"),$r("app.media.img6"),$r("app.media.img7"),$r("app.media.img8"),$r("app.media.img9"),$r("app.media.img10"),$r("app.media.img11"),$r("app.media.img12"),$r("app.media.img13"),$r("app.media.img14"),$r("app.media.img15"),$r("app.media.img16"),$r("app.media.img17"),$r("app.media.img18"),$r("app.media.img19"),$r("app.media.img20")]private names:string[]=["马云","任正非","李彦宏","张磊","刘强东","奶茶妹","马化腾","鸿祎","余大炮","马斯克","奥巴马","李斌","雷军","成龙","刘德华","巴菲特","张磊","汪涵","大张伟","李连杰"]@State contacts:Contact[]=[new Contact(this.names[0],this.icons[0]),new Contact(this.names[1],this.icons[1]),new Contact(this.names[2],this.icons[2]),new Contact(this.names[3],this.icons[3]),new Contact(this.names[4],this.icons[4]),new Contact(this.names[5],this.icons[5]),new Contact(this.names[6],this.icons[6]),new Contact(this.names[7],this.icons[7]),new Contact(this.names[8],this.icons[8]),new Contact(this.names[9],this.icons[9]),new Contact(this.names[10],this.icons[10]),new Contact(this.names[11],this.icons[11]),new Contact(this.names[12],this.icons[12]),new Contact(this.names[13],this.icons[13]),new Contact(this.names[14],this.icons[14]),new Contact(this.names[15],this.icons[15]),new Contact(this.names[16],this.icons[16]),new Contact(this.names[17],this.icons[17]),new Contact(this.names[18],this.icons[18]),new Contact(this.names[19],this.icons[19]),];//通过封装实体类的方式，生成创建列表build(){Column(){Text("联系人列表").width("100%").height(60).backgroundColor("#800f").fontSize(25).fontColor(Color.White).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)//列表设置宽度100%，高度根据内容自适应List({space:10}){ForEach(this.contacts,(item:Contact,index)=>{ListItem(){Row(){Image(item.icon).width(40).height(40).margin(10)Text(item.name).fontSize(20).margin({left:20}).layoutWeight(1)Image(item.icon1).width(40).height(40).margin(10).backgroundColor("#6aaa").borderRadius(20)}.width("100%")}},item=>item.key)}.width("100%").divider({strokeWidth:1,color:"#aaa",startMargin:10,endMargin:10}).scrollBar(BarState.Auto)}.width("100%")}
}

二级列表的综合学习

选择联系人，实现左滑显示删除效果

联系人分组联动效果

一键回归顶部效果

代码如下

//二级列表的实现
import util from '@ohos.util'
//创建实体类联系人
class Contact{key:string=util.generateRandomUUID(true); //随机生成UUIDname:string;icon:Resource;icon1:Resource=$r("app.media.img21");//定义构造方法constructor(name:string,icon:Resource) {this.name=name;this.icon=icon;}
}@Entry
@Component
struct Three{private  icons:Resource[]=[$r("app.media.img1"),$r("app.media.img2"),$r("app.media.img3"),$r("app.media.img4"),$r("app.media.img5"),$r("app.media.img6"),$r("app.media.img7"),$r("app.media.img8"),$r("app.media.img9"),$r("app.media.img10"),$r("app.media.img11"),$r("app.media.img12"),$r("app.media.img13"),$r("app.media.img14"),$r("app.media.img15"),$r("app.media.img16"),$r("app.media.img17"),$r("app.media.img18"),$r("app.media.img19"),$r("app.media.img20")]private names:string[]=["马云","任正非","李彦宏","张磊","刘强东","奶茶妹","马化腾","鸿祎","余大炮","马斯克","奥巴马","李斌","雷军","成龙","刘德华","巴菲特","张磊","汪涵","大张伟","李连杰"]private groups:object[]=[{ title:"A",contacts:[new Contact(this.names[0],this.icons[0]),new Contact(this.names[1],this.icons[1]),new Contact(this.names[2],this.icons[2]),new Contact(this.names[3],this.icons[3]),new Contact(this.names[4],this.icons[4]),new Contact(this.names[5],this.icons[5])]},{ title:"B",contacts:[new Contact(this.names[6],this.icons[6]),new Contact(this.names[7],this.icons[7]),new Contact(this.names[8],this.icons[8]),new Contact(this.names[9],this.icons[9])]},{ title:"C",contacts:[new Contact(this.names[10],this.icons[10]),new Contact(this.names[11],this.icons[11]),new Contact(this.names[12],this.icons[12]),new Contact(this.names[13],this.icons[13]),new Contact(this.names[14],this.icons[14]),new Contact(this.names[15],this.icons[15]),new Contact(this.names[16],this.icons[16])]},{ title:"D",contacts:[new Contact(this.names[17],this.icons[17]),new Contact(this.names[18],this.icons[18]),new Contact(this.names[19],this.icons[19])]},]//使用层布局添加滚动定位按钮private listScroller: Scroller = new Scroller();@Builder itemEnd(index: number) {// 侧滑后尾端出现的组件Button({ type: ButtonType.Circle }) {Image($r('app.media.del')).width(25).height(25)}.width(40).height(40).backgroundColor("#8aaa").onClick(() => {this.groups.splice(index, 1);})}@Builder itemHead(text: string) {// 列表分组的头部组件，对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}build(){Stack({alignContent:Alignment.BottomEnd}){Column(){Text("联系人列表").width("100%").height(60).backgroundColor("#800f").fontSize(25).fontColor(Color.White).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center)//列表设置宽度100%，高度根据内容自适应List({space:10,scroller:this.listScroller}){ForEach(this.groups,item=>{ListItemGroup({header:this.itemHead(item.title)}){ForEach(item.contacts,(contact,index)=>{ListItem(){Row(){Badge({count: Math.round(Math.random()*10),position: BadgePosition.RightTop,style: { badgeSize: 16, badgeColor: '#FA2A2D' }}){Image(contact.icon).width(40).height(40)}.margin({left:10})Text(contact.name).fontSize(20).margin({left:20}).layoutWeight(1)Image(contact.icon1).width(40).height(40).margin(10).backgroundColor("#6aaa").borderRadius(20)}.width("100%")}.swipeAction({ end: this.itemEnd(index) }) // 设置侧滑属性})}})}.width("100%").sticky(StickyStyle.Header)// 设置吸顶，实现粘性标题效果}.width("100%")//创建按钮，回到顶部Button(){Image($r("app.media.top")).width(40).height(40)}.width(70).height(70).zIndex(1).margin({bottom:30,right:30}).backgroundColor("#6aaa").onClick(()=>{// 点击按钮时，指定跳转位置，返回列表顶部this.listScroller.scrollToIndex(0)})}.width("100%").height("100%")}
}

这篇关于【Harmony3.1/4.0】笔记二-列表的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

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

相关文章

Python中合并列表(list)的六种方法小结

Python中合并列表(list)的六种方法小结

《Python中合并列表(list)的六种方法小结》本文主要介绍了Python中合并列表(list)的六种方法小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋... 目录一、直接用 + 合并列表二、用 extend() js方法三、用 zip() 函数交叉合并四、用
阅读更多...
Spring Boot中的YML配置列表及应用小结

Spring Boot中的YML配置列表及应用小结

《SpringBoot中的YML配置列表及应用小结》在SpringBoot中使用YAML进行列表的配置不仅简洁明了,还能提高代码的可读性和可维护性,：本文主要介绍SpringBoot中的YML配... 目录YAML列表的基础语法在Spring Boot中的应用从YAML读取列表列表中的复杂对象其他注意事项总
阅读更多...
C++类和对象之初始化列表的使用方式

C++类和对象之初始化列表的使用方式

《C++类和对象之初始化列表的使用方式》：本文主要介绍C++类和对象之初始化列表的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C++初始化列表详解：性能优化与正确实践什么是初始化列表？初始化列表的三大核心作用1. 性能优化：避免不必要的赋值操作2. 强
阅读更多...
Python列表去重的4种核心方法与实战指南详解

Python列表去重的4种核心方法与实战指南详解

《Python列表去重的4种核心方法与实战指南详解》在Python开发中,处理列表数据时经常需要去除重复元素,本文将详细介绍4种最实用的列表去重方法,有需要的小伙伴可以根据自己的需要进行选择... 目录方法1：集合(set)去重法（最快速）方法2：顺序遍历法（保持顺序）方法3：副本删除法（原地修改）方法4：
阅读更多...
利用Python快速搭建Markdown笔记发布系统

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言：为什么要自建知识博客一、技术选型：极简主义开发栈二、系统架构设计三、核心代码实现（分步解析
阅读更多...
Python中DataFrame转列表的最全指南

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
python展开嵌套列表的多种方法

python展开嵌套列表的多种方法

《python展开嵌套列表的多种方法》本文主要介绍了python展开嵌套列表的多种方法,包括for循环、列表推导式和sum函数三种方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、嵌套列表格式二、嵌套列表展开方法（一）for循环（1）for循环+append()（2）for循环+pyPhWiFd
阅读更多...
Python容器类型之列表/字典/元组/集合方式

Python容器类型之列表/字典/元组/集合方式

《Python容器类型之列表/字典/元组/集合方式》：本文主要介绍Python容器类型之列表/字典/元组/集合方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 列表（List） - 有序可变序列1.1 基本特性1.2 核心操作1.3 应用场景2. 字典（D
阅读更多...
Java中数组转换为列表的两种实现方式(超简单)

Java中数组转换为列表的两种实现方式(超简单)

《Java中数组转换为列表的两种实现方式(超简单)》本文介绍了在Java中将数组转换为列表的两种常见方法使用Arrays.asList和Java8的StreamAPI,Arrays.asList方法简... 目录1. 使用Java Collections框架（Arrays.asList）1.1 示例代码1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2