HarmonyOS ArkUI List 的侧滑删除 用 ListItem 的 swipeAction + endIcon 的做法

📌 一句话摘要

本文系统讲解了 HarmonyOS ArkUI List 组件的侧滑删除实现方案，涵盖 swipeAction 配置、交互语义、双侧操作、动画优化、撤销机制及空状态处理等关键实践。

📝 详细摘要

文章详细阐述了 HarmonyOS ArkUI 中实现列表侧滑删除的完整模式。首先介绍了通过 ListItem 的 swipeAction 属性配合 start 和 end builder 实现侧滑交互的基础写法，说明 end 表示左滑、start 表示右滑。随后解析了四种交互语义：轻滑回弹、滑开显示操作、点击触发动作、超过阈值直接触发。针对不同数据重要性，提出了删除策略：轻量数据直接删除，重要数据弹出确认框。文章还演示了使用 animateTo 实现淡出动画、通过 filter 整数组赋值避免 splice 触发响应问题、在 ForEach 中正确设置 key 以优化渲染性能。最后讨论了撤销机制（5 秒内可撤销）和空列表的引导设计，强调细节决定用户体验质感。

💡 主要观点

1. swipeAction 是实现侧滑删除的核心 API 通过设置 end 或 start 的 builder、actionAreaDistance（推荐 100 vp）和 onAction 回调，可快速构建左右滑开的交互效果。
2. 交互阈值与用户体验需平衡 100 vp 的滑开阈值兼顾误触防护和操作效率，超过 200 vp 可实现一步到位的直接触发，提升效率党的使用体验。
3. 删除后需整数组赋值而非 splice ArkUI 对数组引用的响应机制下，splice 可能不触发 List 重新渲染，建议使用 filter 或重新赋值确保 UI 正常更新。
4. ForEach 的 key 参数必不可缺 正确设置 key 可让 ArkUI 只重新渲染变化的 item，避免全量 rebuild，显著提升列表滚动性能。
5. 删除动画和撤销机制提升用户感知 通过 animateTo 实现淡出效果，配合 5 秒内的撤销弹窗，可在保持操作流畅性的同时降低误删风险。

💬 文章金句

• ArkUI 的 List 对数组引用响应，splice 可能不触发 rebuild
• ForEach 的 key 永远指定，用 id 字段
• 删除动画是 app 精致度的关键，1-2 行代码的差别，用户感知的 app 质感翻倍

📊 文章信息

阅读完整文章