概述

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

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在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%")}
}