#鸿蒙通关秘籍#如何在HarmonyOS Next中实现待办事项的增删功能？

在HarmonyOS Next中，通过List和ListItem组件轻松实现待办事项的增删功能：

1. 初始化待办事项的数据数组toDoData，并使用@State进行管理，以便自动更新UI。

   @State toDoData = [
       { id: 1, title: '待办事项1' }
   ];
   1.
   2.
   3.

   复制

2. 创建添加待办事项的功能，点击按钮触发事件，新增待办事项。

   function addToDoItem() {
       const newId = this.toDoData.length + 1;
       this.toDoData = [...this.toDoData, { id: newId, title: `待办事项${newId}` }];
   }
   1.
   2.
   3.
   4.

   复制

3. 实现列表显示，并通过长按触发事件实现待办事项删除。

   List({
       data: this.toDoData,
       builder: (item) => {
           return ListItem({
               content: item.title,
               onLongPress: () => {
                   this.toDoData = this.toDoData.filter(todo => todo.id !== item.id);
               }
           });
       }
   });
   1.
   2.
   3.
   4.
   5.
   6.
   7.
   8.
   9.
   10.
   11.

   复制

4. 将新增待办事项的按钮添加到界面中。

   Button('添加待办事项', {
       onClick: () => addToDoItem()
   });
   1.
   2.
   3.

   复制

通过这些步骤，能够实现待办事项的动态增删，并在界面上实时更新。