HarmonyOS6 ArkTS List 设置编辑模式

一、功能概述

List 编辑模式是应用开发中非常常用的交互功能，通过控制状态变量实现普通模式 / 编辑模式的自由切换。
进入编辑模式后，列表项侧滑/直接显示删除按钮，可对指定列表项执行删除操作，是官方推荐的列表编辑方案。

• 核心能力：编辑模式切换、列表项删除、动态刷新列表
• 核心组件：List+ListItem+LazyForEach
• 适用场景：消息管理、文件管理、购物车、收藏列表等

二、官方核心知识点

1. 编辑模式实现原理

通过@State状态变量控制编辑UI（删除按钮）的显示与隐藏，实现模式切换。

2. 列表数据驱动

List 必须使用数据源（DataSource）管理数据，增删后通过reloadData()刷新列表，这是官方规范用法。

3. 列表项操作

在ListItem内部嵌套删除按钮，点击后通过索引（index）删除对应数据。

三、完整可运行代码

// xxx.ets import { ListDataSource } from './ListDataSource'; @Entry @Component struct ListExample { arr: ListDataSource = new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); @State editFlag: boolean = false; build() { Stack({ alignContent: Alignment.TopStart }) { Column() { List({ space: 20, initialIndex: 0 }) { LazyForEach(this.arr, (item: number, index?: number) => { ListItem() { Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { Text('' + item) .width('100%') .height(80) .fontSize(20) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) .flexShrink(1) if (this.editFlag) { Button() { Text('delete').fontSize(16) }.width('30%').height(40) .onClick(() => { if (index != undefined) { console.info(this.arr.getData(index) + 'Delete'); this.arr.deleteItem(index); this.arr.reloadData(); console.info(JSON.stringify(this.arr)); this.editFlag = false; } }).stateEffect(true) } } } }, (item: number, index: number) => item.toString() + index.toString()) }.width('90%') .scrollBar(BarState.Off) .friction(0.6) }.width('100%') Button('编辑列表') .onClick(() => { this.editFlag = !this.editFlag; }).margin({ top: 5, left: 20 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) } }

运行效果如图：

当点击编辑列表按钮：

删除3：

四、代码功能详解

1. 编辑模式状态控制

@State editFlag: boolean = false;

• false：普通模式（隐藏删除按钮）
• true：编辑模式（显示删除按钮）

2. 编辑按钮切换

点击「编辑列表」按钮切换编辑模式：

Button('编辑列表') .onClick(() => { this.editFlag = !this.editFlag; })

3. 列表项动态显示删除按钮

if (this.editFlag) { // 删除按钮 }

根据状态判断是否渲染删除按钮，符合官方条件渲染规范。

4. 删除列表项

this.arr.deleteItem(index); // 删除数据 this.arr.reloadData(); // 刷新列表 this.editFlag = false; // 退出编辑模式

严格遵循官方：先操作数据源 → 再刷新列表的流程。

5. LazyForEach 高性能渲染

官方推荐长列表渲染方式，配合数据源实现高效复用。

五、运行效果

1. 初始为普通模式，只显示列表项
2. 点击「编辑列表」进入编辑模式，每项右侧显示删除按钮
3. 点击删除按钮 → 删除对应项 → 自动刷新列表 → 退出编辑模式
4. 整体交互流畅，符合 HarmonyOS 设计规范

总结

1. List 编辑功能必须基于数据源（DataSource）实现
2. 数据删除后必须调用reloadData()刷新列表
3. 使用@State管理编辑状态
4. 删除操作必须判断 index 合法性
5. 推荐使用LazyForEach渲染长列表

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力！