HarmonyOS6 ArkTS List 设置编辑模式

文章目录一、功能概述二、官方核心知识点1. 编辑模式实现原理2. 列表数据驱动3. 列表项操作三、完整可运行代码四、代码功能详解1. 编辑模式状态控制2. 编辑按钮切换3. 列表项动态显示删除按钮4. 删除列表项5. LazyForEach 高性能渲染五、运行效果总结一、功能概述List 编辑模式是应用开发中非常常用的交互功能通过控制状态变量实现普通模式 / 编辑模式的自由切换。进入编辑模式后列表项侧滑/直接显示删除按钮可对指定列表项执行删除操作是官方推荐的列表编辑方案。核心能力编辑模式切换、列表项删除、动态刷新列表核心组件ListListItemLazyForEach适用场景消息管理、文件管理、购物车、收藏列表等二、官方核心知识点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 高性能渲染官方推荐长列表渲染方式配合数据源实现高效复用。五、运行效果初始为普通模式只显示列表项点击「编辑列表」进入编辑模式每项右侧显示删除按钮点击删除按钮 → 删除对应项 → 自动刷新列表 → 退出编辑模式整体交互流畅符合 HarmonyOS 设计规范总结List 编辑功能必须基于数据源DataSource实现数据删除后必须调用reloadData()刷新列表使用State管理编辑状态删除操作必须判断 index 合法性推荐使用LazyForEach渲染长列表如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力