HarmonyOSNext 列表开发指南

2025-06-07
广东
本文字数：2036 字
阅读完需：约 7 分钟

##Harmony OS Next ##Ark Ts ##教育本文适用于教育科普行业进行学习，有错误之处请指出我会修改。

🎯 列表基础：你的数据管家

列表就像智能收纳盒！内容太多时自动滚动，超适合展示：

通讯录 👥
音乐歌单 🎵
购物车 🛒
新闻流 📰

✨ 核心超能力

List() {  // 三种姿势任你选 ↓↓↓  ListItem()      // 单个元素  ForEach(...)    // 循环渲染  ListItemGroup() // 分组显示}.scrollBar(BarState.Auto) // 自动滚动条

复制代码

🧭 布局与约束：方向感很重要！

📏 主轴 vs 交叉轴

⚡ 黄金法则

主轴尺寸不够时自动撑开，超过父容器就截断！交叉轴默认占满父容器（想改？看这里 ↓↓↓）

🛠️ 开发四步曲

1️⃣ 设置滚动方向

// 默认垂直滚动（不用写参数）List() { ... }
// 水平滚动超简单！List() { ... }.listDirection(Axis.Horizontal) // ← 关键参数

复制代码

2️⃣ 多列布局神器

// 两列垂直列表List() { ... }.lanes(2) // 🎯 自适应列数.alignListItem(ListItemAlign.Center) // 居中对齐

复制代码

💡 超实用技巧

用 lanes: {minLength:200, maxLength:300} 自动适配不同屏幕！平板秒变两列，手机单列显示~

🎮 动态数据绑定：告别重复代码！

联系人列表实战

// 数据类class Contact {  key: string = util.generateRandomUUID(true);  name: string;  avatar: Resource; // 头像资源}
// 列表组件@Entry@Componentstruct ContactsList {  @State contacts: Contact[] = [    new Contact("小明", $r("app.media.avatar1")),    new Contact("小红", $r("app.media.avatar2"))  ]
  build() {    List() {      ForEach(this.contacts, (item) => {        ListItem() {          Row() {            Image(item.avatar) // 头像              .width(40).height(40).margin(10)            Text(item.name).fontSize(20) // 名字          }        }      })    }  }}

复制代码

💅 颜值即正义：样式美颜指南

1️⃣ 添加分隔线

List() { ... }.divider({  strokeWidth: 1,          // 线宽  startMargin: 60,        // 左边距  endMargin: 10,          // 右边距  color: '#F0F0F0'        // 颜色})

复制代码

2️⃣ 小红点标记

ListItem() {  Badge({     count: 3,     position: BadgePosition.RightTop,    style: { badgeSize: 16, badgeColor: '#FF3366' }  }) {    Image('message_icon.png')  }}

复制代码

🚀 进阶功能：秀到飞起！

1️⃣ 粘性标题（通讯录必备）

List() {  ForEach(groups, (group) => {    ListItemGroup({ header: this.renderHeader(group.title) }) {      // 分组内容...    }  })}.sticky(StickyStyle.Header) // 🎯 关键代码

复制代码

2️⃣ 侧滑删除（微信同款）

ListItem().swipeAction({  end: {    builder: () => {      Button('删除')        .backgroundColor('#FF3B30')        .onClick(() => { /* 删除逻辑 */ })    }  }})

复制代码

3️⃣ 滚动条：智能显隐

List() { ... }.scrollBar(BarState.Auto) // 触摸时出现，2秒后自动隐藏

复制代码

🚀 API10+ 默认开启，老项目记得检查兼容性！

🎪 高级定制功能

分组列表：像整理文件夹

// 分组头部组件@Builder groupHeader(title: string) {  Text(title)    .fontSize(18)    .backgroundColor('#F5F5F5')    .padding(10)}
List() {  ListItemGroup({ header: this.groupHeader('好友') }) {    // 好友列表项...  }  ListItemGroup({ header: this.groupHeader('同事') }) {    // 同事列表项...  }}

复制代码

滚动控制：瞬间移动！

private scroller = new Scroller()
// 绑定滚动控制器List({ scroller: this.scroller }) { ... }
// 一键回顶部Button('↑').onClick(() => {  this.scroller.scrollToIndex(0) // 跳转到第一个项})

复制代码

下拉刷新：数据实时更新

// 推荐使用Refresh组件Refresh({ refreshing: false }) {  List() { ... }}.onStateChange((refreshStatus: RefreshStatus) => {  // 处理刷新逻辑})

复制代码

🛠️ 编辑模式秘籍

1️⃣ 长按进入编辑模式

ListItem().gesture(  LongPressGesture()    .onAction(() => {      this.isEditMode = true // 开启编辑模式    }))

复制代码

2️⃣ 批量删除操作

// 勾选多项Checkbox()  .onChange((checked) => {    if (checked) selectedItems.push(item)    else selectedItems.remove(item)  })
// 删除全部选中项Button('删除').onClick(() => {  this.data = this.data.filter(item => !selectedItems.includes(item))})

复制代码

⚡ 性能优化指南

懒加载 + 缓存策略

List() {  LazyForEach(this.bigData, (item) => {    ListItem() { ... }  })}.cachedCount(5) // 缓存前后5项

复制代码

📊 缓存策略对比

🎁 总结表格：一图掌握所有 API

现在就动手打造你的专属列表吧！ 🚀 遇到问题随时回来查表~

📚 速查表：一图流总结

🎉 现在就去打造你的专属列表吧！有问题随时回来查~ 👉 小作业：试着用 List 实现一个电影排行榜，带评分星星⭐️和分隔线！

发布于: 刚刚阅读数: 2

Turing_010

关注

还未添加个人签名 2025-05-22 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOSNext 列表开发指南

🎯 列表基础：你的数据管家

列表就像 ​​智能收纳盒​​！内容太多时自动滚动，超适合展示：

🧭 布局与约束：方向感很重要！

📏 主轴 vs 交叉轴

🛠️ 开发四步曲

1️⃣ 设置滚动方向

2️⃣ 多列布局神器

🎮 动态数据绑定：告别重复代码！

联系人列表实战

💅 颜值即正义：样式美颜指南

1️⃣ 添加分隔线

2️⃣ 小红点标记

🚀 进阶功能：秀到飞起！

1️⃣ 粘性标题（通讯录必备）

2️⃣ 侧滑删除（微信同款）

3️⃣ 滚动条：智能显隐

🎪 高级定制功能

分组列表：像整理文件夹

滚动控制：瞬间移动！

下拉刷新：数据实时更新

🛠️ 编辑模式秘籍

1️⃣ 长按进入编辑模式

2️⃣ 批量删除操作

⚡ 性能优化指南

懒加载 + 缓存策略

🎁 总结表格：一图掌握所有 API

📚 速查表：一图流总结

Turing_010

评论

列表就像智能收纳盒！内容太多时自动滚动，超适合展示：