【HarmonyOS】笔记二-列表

概述

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

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

列表的综合学习

代码如下

import util from '@ohos.util'
//创建实体类联系人
class Contact{
    key:string=util.generateRandomUUID(true); //随机生成UUID
    name: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); //随机生成UUID
  name: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%")

  }
}