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

HarmonyOS
6天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Yvr序章CPL

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

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

    @State toDoData = [
        { id: 1, title: '待办事项1' }
    ];
    
  2. 创建添加待办事项的功能,点击按钮触发事件,新增待办事项。

    function addToDoItem() {
        const newId = this.toDoData.length + 1;
        this.toDoData = [...this.toDoData, { id: newId, title: `待办事项${newId}` }];
    }
    
  3. 实现列表显示,并通过长按触发事件实现待办事项删除。

    List({
        data: this.toDoData,
        builder: (item) => {
            return ListItem({
                content: item.title,
                onLongPress: () => {
                    this.toDoData = this.toDoData.filter(todo => todo.id !== item.id);
                }
            });
        }
    });
    
  4. 将新增待办事项的按钮添加到界面中。

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

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

分享
微博
QQ
微信
回复
6天前
相关问题