鸿蒙便捷生活类行业实践——待办事项便贴（系列见主页）

场景介绍

待办事项便贴是便捷生活类应用中高频使用场景之一，如用户记录待办事项时，需要添加、删除记录以及对记录进行自定义排序等功能。

本示例基于animateTo、List组件、LongPressGesture和PanGesture实现了文件列表推动、插入效果，满足待办事项便贴的基本需求。

实现思路

1. 通过结合LongPressGesture与PanGesture，共同实现列表手势拖动能力。

   // 以下组合手势为顺序识别，当长按手势事件未正常触发时，则不会触发拖动手势事件
   GestureGroup(GestureMode.Sequence,
   LongPressGesture() // 长按
   .onAction((event: GestureEvent) => {
   // 记录长按状态
   }),
   PanGesture() // 拖动
   .onActionStart(() => {
   // 计算list开始拖动的偏移
   })
   .onActionUpdate((event: GestureEvent) => {
   // 计算item移动坐标时，需要算上list滚动的距离
   // 获取手指信息
   })
   .onActionEnd((event: GestureEvent) => {
   // 拖拽结束后放置item
   })
   )

2. 通过animateTo，实现内容的拖动、放置、改变位置效果。

   onMove(item: T, offsetY: number): void {
   // 触发拖动时，被覆盖子组件缩小与恢复的动画
   let shrinkScale: number = 1 - value / 10; // 计算缩放比例，value值缩小10倍
   if (index < this.modifier.length - 1) { // 当拖拽的时候，被交换的对象会缩放
   this.modifier[index + 1].scale = direction > 0 ? shrinkScale : 1;
   }
   if (index > 0) {
   this.modifier[index - 1].scale = direction > 0 ? 1 : shrinkScale;
   }
   // 处理列表项的切换操作
   if (Math.abs(this.offsetY) > ITEM_HEIGHT / 2) {
   getUIContext()?.animateTo({ curve: Curve.Friction, duration: ANIMATE_DURATION }, () => {
   this.offsetY -= direction * ITEM_HEIGHT;
   this.dragRefOffset += direction * ITEM_HEIGHT;
   this.modifier[index].offsetY = this.offsetY;
   let target = index + direction // 目标位置索引
   if (target !== -1 && target <= this.modifier.length)
   this.changeItem(index, target);
   }
   })
   }
   }

3. 拖拽结束后，通过animateTo，实现拖拽内容和被拖拽内容的恢复动画效果。

   onDrop(item: T): void {
   // 通过interpolatingSpring(0, 1, 400, 38)构造插值器弹簧曲线对象初始速度为0，质量为1，刚度为400，阻尼为38
   getUIContext()?.animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {
   this.state = OperationStatus.DROPPING;
   if (index < this.modifier.length - 1) {
   this.modifier[index + 1].scale = 1;
   }
   if (index > 0) {
   this.modifier[index - 1].scale = 1;
   }
   })
   // 通过interpolatingSpring(14, 1, 170, 17)构造插值器弹簧曲线对象初始速度为14，质量为1，刚度为170，阻尼为17
   getUIContext()?.animateTo({ curve: curves.interpolatingSpring(14, 1, 170, 17) }, () => {
   this.state = OperationStatus.IDLE;
   this.modifier[index].hasShadow = false;
   this.modifier[index].scale = 1; // 初始化缩放比例
   this.modifier[index].offsetY = 0; // 初始化偏移量
   })
   }

约束与限制

• 本示例支持API Version 16 Release及以上版本。
• 本示例支持HarmonyOS 5.0.4 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.4 Release及以上版本进行编译运行。

工程目录

├──entry/src/main/ets // 代码区
│ ├──constants
│ │ └──Constants.ets // 常量
│ ├──entryability
│ │ └──Entryability.ets
│ ├──model
│ │ ├──AttributeModifier.ets // 自定义属性修改器
│ │ ├──ListExchangeCtrl.ets // 列表项切换控制
│ │ ├──ListInfo.ets // 列表信息
│ │ └──MockData.ets // Mock数据
│ ├──pages
│ │ └──StickyNotePage.ets // 便贴主页面
│ └──view
│ └──StickyNoteView.ets // 便贴子组件
└──entry/src/main/resources // 应用资源目录

加入下方链接班级，得鸿蒙礼盒

一起拿鸿蒙礼盒，戳我戳我！！

本期活动时间：2025年8月1日-12月31日