HarmonyOS List，解锁列表构建新姿势！_list 分组第一组1个轮播第二组商品列表-优快云博客

当你打开手机，随意进入某个应用，无论是系统自带的设置页面，还是电商平台琳琅满目的商品列表，又或是社交软件里的聊天记录，你都会发现一种极为常见的界面元素 —— 列表。列表就像一位勤劳的 “收纳师”，将各种信息有条不紊地排列展示，让我们能轻松获取想要的内容。在 HarmonyOS 的应用开发宇宙中，List 组件便是构建这些列表页面的神奇 “魔法棒” 。

List 组件在 HarmonyOS 应用开发里占据着举足轻重的地位，广泛应用于各类 APP。从日常工具类应用，到娱乐影音、办公学习类应用，只要涉及信息的有序展示，List 组件几乎无处不在。它的存在，让应用的界面更加整洁、高效，用户交互体验也得到了极大提升。

二、List 组件大揭秘

要想真正掌握 List 组件的魔法，我们得深入到它的内部，了解它的组成和工作原理。List 组件家族主要包括 List、ListItem 和 ListItemGroup 这几个关键成员，它们各司其职，共同协作，为我们呈现出丰富多彩的列表界面。

（一）List 组件基础剖析

List 组件就像是一个强大的 “列表管理器”，它按照水平或者竖直方向线性排列子组件，构建出我们常见的列表结构。当列表项较多，内容超过屏幕大小时，它还能自动提供滚动功能，就像给列表加上了一个 “自动翻页器”，让用户可以轻松浏览所有内容。

在使用 List 组件时，我们可以通过一些参数来定制它的行为。比如 space 参数，它用于设置子组件主轴方向的间隔，就像是给列表项之间添加了一些 “呼吸空间”，让列表看起来更加清晰、舒适。假如我们在构建一个商品列表时，将 space 设置为 10vp，那么每个商品项之间就会有 10vp 的间隔，避免了内容的拥挤。代码示例如下：

List({space: 10}) {

ForEach(this.productList, (product) => {

ListItem() {

// 商品项的具体内容

Text(product.name).fontSize(16)

Text(product.price).fontSize(14).textColor(Color.Gray)

}

})

}

initialIndex 参数则用于设置 List 第一次加载数据时所要显示的第一个子组件的下标。例如，在一个新闻列表应用中，如果我们希望用户打开应用时直接看到第 5 条新闻，就可以将 initialIndex 设置为 4（因为下标从 0 开始）。代码如下：

List({initialIndex: 4}) {

ForEach(this.newsList, (news) => {

ListItem() {

Text(news.title).fontSize(18)

Text(news.publishTime).fontSize(14).textColor(Color.Gray)

}

})

}

scroller 参数是可滚动组件的控制器，用于与可滚动组件进行绑定，就像是给列表的滚动行为安上了一个 “遥控器”，我们可以通过它来控制列表的滚动速度、位置等。不过要注意，它不允许和其他滚动类组件绑定同一个滚动控制对象。

（二）ListItem 组件深度探索

ListItem 组件是 List 组件的 “得力助手”，专门用于展示列表中的具体项。它就像是列表中的一个个 “小单元”，每个 ListItem 都可以包含丰富的内容，如文本、图片、按钮等，为用户呈现出具体的信息。

ListItem 组件也有一些实用的参数。selectable 参数用于设置当前 ListItem 元素是否可以被鼠标框选，在一些需要用户批量操作的场景中非常有用。比如在文件管理应用中，用户可以通过框选多个 ListItem 来进行文件的复制、删除等操作。代码示例如下：

ListItem({selectable: true}) {

Text('文件1').fontSize(16)

}

swipeAction 参数则用于设置 ListItem 的划出组件，为列表项增添了更多的交互性。通过设置 start 和 end 属性，我们可以定义 ListItem 在划动时左右（垂直布局）或上下（水平布局）两侧显示的组件。例如，在一个任务管理应用中，我们可以设置 ListItem 向左划动时显示 “完成任务” 按钮，向右划动时显示 “删除任务” 按钮，让用户可以更便捷地操作任务。代码如下：

ListItem({

swipeAction: {

start: () => {

Button('完成任务').onClick(() => {

// 完成任务的逻辑

})

},

end: () => {

Button('删除任务').onClick(() => {

// 删除任务的逻辑

})

}