【鸿蒙开发教程】HarmonyOS 实现List 列表

前言：

随着信息技术的飞速发展，智能设备已经深入到我们生活的每一个角落。无论是智能手机、平板电脑，还是智能穿戴设备，它们都在不断地改变着我们的生活方式。在这样的背景下，操作系统作为智能设备的核心，其重要性不言而喻。HarmonyOS，作为华为推出的全新分布式操作系统，旨在为用户提供更加流畅、高效、安全的智能体验。

根据研究机构Counterpoint Research发布的最新数据，2024年第一季度，鸿蒙OS份额由去年一季度的8%上涨至17%，iOS份额则从20%下降至16%。

这意味着，华为鸿蒙OS在中国市场的份额超越苹果iOS，已成中国第二大操作系统

随着鸿蒙市场份额的不断提升，相应的岗位也会迎来一个爆发式的增长。这对于想要换赛道的程序员来说是一个非常好的消息，话说大家最近有想法转型鸿蒙开发吗？

本文主要讲一下HarmonyOS 开发中实现List 列表

在HarmonyOS中，List列表是一种常见且重要的界面元素。它不仅可以展示大量的数据，还可以通过滑动操作方便地查看更多内容。因此，熟练掌握List列表的实现方法，对于开发者来说至关重要。

本文将详细介绍如何在HarmonyOS中实现List列表功能。我们将从基础概念入手，逐步深入，探讨List列表的创建、数据绑定、样式定制以及交互响应等方面的内容。通过本文的学习，读者将能够掌握HarmonyOS中List列表的基本实现方法，并能够在实际项目中灵活运用。

值得一提的是，HarmonyOS采用了全新的分布式技术，使得不同设备之间可以无缝协同工作。这也意味着，在HarmonyOS中实现的List列表，不仅可以在单一设备上展示，还可以跨设备共享和同步，为用户带来更加便捷的使用体验。

总之，掌握HarmonyOS中List列表的实现方法，对于提升应用的用户体验和竞争力具有重要意义。希望本文能够为读者在HarmonyOS开发道路上提供一些有益的参考和启示。

一、基础概念与原理

基础概念：

List在HarmonyOS中是一种重要的界面元素，主要用于展示一系列数据项。这些数据项可以是同类型或不同类型的数据集合，如商品列表、图片列表、文本列表等。List的主要功能是为用户提供一个结构化的视图，允许他们轻松地浏览和交互大量的数据项。通过List，开发者可以有效地组织和呈现应用中的信息，提高用户的使用效率和体验。

原理：

List组件的工作原理基于其内部的数据管理和布局机制。在HarmonyOS中，List组件能够自动管理其内部子元素的复用和滚动行为。当列表项达到一定数量，内容超过屏幕大小时，List组件会自动提供滚动功能，允许用户上下滑动查看更多内容。此外，List组件还支持条件渲染、循环渲染、懒加载等渲染控制方式，以优化性能和提高用户体验。

在布局方面，List组件按垂直或水平方向线性排列子组件，为列表中的行或列提供单个视图。开发者可以通过配置List组件的属性，如方向、间距、样式等，来自定义列表的外观和行为。同时，List组件还支持与其他UI元素的交互，如点击事件、滑动事件等，从而为用户提供丰富的交互体验。

总之，HarmonyOS中的List组件通过其高效的数据管理和布局机制，为开发者提供了一个强大而灵活的工具来构建复杂的列表界面。无论是简单的商品列表还是复杂的嵌套列表，List组件都能帮助开发者实现高效、美观、易用的用户界面。

这里list 是一种容器，需要注意的是ListItem 是一个标记，代表的是list 内部的一项。listItem 是需要写组件的，里面只能包含一个根组件。如果需要多个组件，listItem 不是一个容器，list 才是。

二、List列表的创建与布局

(1) 数据的创建

首先，我们来自己定义一些数据，用来页面的战术。

private items:Array<Item>=[
    new Item('Mate60',$r('app.media.a'),6999,500),
    new Item('小米',$r('app.media.b'),4999),
    new Item('oppo',$r('app.media.c'),2000),
    new Item('Vivo',$r('app.media.d'),2344),
    new Item('苹果',$r('app.media.e'),3000),
    new Item('荣耀',$r('app.media.f'),8000),
    new Item('苹果',$r('app.media.e'),3000)
  ]

(2)创建一个Item类

class Item{
name:String
image :ResourceStr
price:number
discount : number

constructor(name:String,imagee:ResourceStr,price:number, discount : number = 0) {
  this.name = name
  this.image = imagee
  this.price = price
  this.discount = discount
}
}

(3) 创建Item 布局

Row(){
                Image(item.image)
                  .width(100)
                  .height(100)
                Column({space:4}){
                  if (item.discount) {
                    Text(item.name.toString())
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('原价￥ '+item.price)
                      .fontSize(14)
                      .fontColor('#ccc')
                      .decoration({type:TextDecorationType.LineThrough})
                    Text('折扣价 ￥ ：'+(item.price -item.discount))
                      .fontSize(20)
                      .fontColor('#f36')
                    Text('补贴￥ '+item.discount )
                      .fontSize(18)
                      .fontColor('#f36')
                  }else {
                    Text(item.name.toString())
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('￥ '+item.price)
                      .fontSize(18)
                      .fontColor('#f36')
                  }
 
                }
                .alignItems(HorizontalAlign.Start)
              }
              .width('100%')
              .backgroundColor('#FFF')
              .borderRadius(20)
              .height(120)
              .padding(10)

(4) 使用ForEach进行渲染数据。

ForEach(
          this.items,
          (item:Item)=>{
            
 
          }
        )

总结：以上是实现List 的主要代码，从代码来看，HarmonyOS 还是比较简单的，有一定其他语言基础的同学很容易看懂。

三、完整代码与运行结果

运行结果

完整代码

class Item{
  name:String
  image :ResourceStr
  price:number
  discount : number
 
  constructor(name:String,imagee:ResourceStr,price:number, discount : number = 0) {
    this.name = name
    this.image = imagee
    this.price = price
    this.discount = discount
  }
}
@Entry
@Component
struct ItemPage {
  private items:Array<Item>=[
    new Item('Mate60',$r('app.media.a'),6999,500),
    new Item('小米',$r('app.media.b'),4999),
    new Item('oppo',$r('app.media.c'),2000),
    new Item('Vivo',$r('app.media.d'),2344),
    new Item('苹果',$r('app.media.e'),3000),
    new Item('荣耀',$r('app.media.f'),8000),
    new Item('苹果',$r('app.media.e'),3000)
  ]
 
  build() {
    Column({space:8}) {
      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(30)
 
      List({space:8}){
        ForEach(
          this.items,
          (item:Item)=>{
            ListItem(){
              Row(){
                Image(item.image)
                  .width(100)
                  .height(100)
                Column({space:4}){
                  if (item.discount) {
                    Text(item.name.toString())
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('原价￥ '+item.price)
                      .fontSize(14)
                      .fontColor('#ccc')
                      .decoration({type:TextDecorationType.LineThrough})
                    Text('折扣价 ￥ ：'+(item.price -item.discount))
                      .fontSize(20)
                      .fontColor('#f36')
                    Text('补贴￥ '+item.discount )
                      .fontSize(18)
                      .fontColor('#f36')
                  }else {
                    Text(item.name.toString())
                      .fontSize(20)
                      .fontWeight(FontWeight.Bold)
                    Text('￥ '+item.price)
                      .fontSize(18)
                      .fontColor('#f36')
                  }
 
                }
                .alignItems(HorizontalAlign.Start)
              }
              .width('100%')
              .backgroundColor('#FFF')
              .borderRadius(20)
              .height(120)
              .padding(10)
            }
 
          }
        )
      }
      .width('100%')
      .layoutWeight(1)
 
 
 
    }
    .width('100%')
    .margin({bottom:20})
  }
}

四、总结与展望

HarmonyOS中的List列表作为界面设计中的核心元素，已经在实际应用中展现出了其强大的功能和灵活性。它不仅能够高效地展示大量数据，而且通过数据绑定机制，能够实时地反映数据模型的变化，为用户提供流畅的交互体验。

在List列表的实现过程中，我们深入探讨了其基础概念、创建布局、数据绑定、样式定制以及交互响应等方面。通过合理的布局和样式定制，List列表可以呈现出多样化的外观和风格，满足不同应用场景的需求。同时，通过数据绑定和交互响应的实现，List列表能够与用户进行紧密的互动，提升用户体验。

写在最后

有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了

最新鸿蒙全栈开发学习线路

鸿蒙HarmonyOS开发教学视频

大厂面试真题

鸿蒙OpenHarmony源码剖析

这份资料能帮住各位小伙伴理清自己的学习思路，更加快捷有效的掌握鸿蒙开发的各种知识。有需要的小伙伴自行领取，，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→鸿蒙全栈开发学习资料