在这里插入图片描述

一、应用概述

1.1 应用简介

待办事项(Todo List)是一款功能完整的任务管理应用。支持任务的增删改查、分类筛选、优先级设置和进度统计。该应用深入展示了ArkTS框架中的CRUD操作、列表渲染、筛选排序和本地数据持久化技术。

1.2 核心功能

功能模块 功能描述 技术实现
任务管理 增删改查任务 数组操作
分类筛选 按状态/优先级筛选 条件过滤
搜索功能 按关键词搜索 字符串匹配
优先级 高/中/低三级 状态枚举
进度统计 完成率统计 数据聚合
数据持久化 本地存储 Preferences

二、CRUD实现

2.1 增删改查

interface TodoItem {
  id: number;
  text: string;
  done: boolean;
  priority: '高' | '中' | '低';
  date: string;
  category: string;
  note: string;
}

@State todos: TodoItem[] = [];

addTodo(text: string, priority: string): void {
  this.todos.push({
    id: Date.now(),
    text: text,
    done: false,
    priority: priority,
    date: new Date().toISOString().split('T')[0],
    category: '默认',
    note: ''
  });
  this.saveData();
}

updateTodo(id: number, updates: Partial<TodoItem>): void {
  const index = this.todos.findIndex(t => t.id === id);
  if (index >= 0) {
    this.todos[index] = { ...this.todos[index], ...updates };
    this.saveData();
  }
}

deleteTodo(id: number): void {
  this.todos = this.todos.filter(t => t.id !== id);
  this.saveData();
}

get filteredTodos(): TodoItem[] {
  let result = [...this.todos];
  if (this.filterType !== '全部') {
    result = result.filter(t => this.filterType === '已完成' ? t.done : !t.done);
  }
  if (this.searchQuery) {
    result = result.filter(t => t.text.includes(this.searchQuery));
  }
  result.sort((a, b) => {
    const priorityOrder = { '高': 0, '中': 1, '低': 2 };
    return priorityOrder[a.priority] - priorityOrder[b.priority];
  });
  return result;
}

三、统计功能

3.1 数据统计

getStats(): TodoStats {
  const total = this.todos.length;
  const done = this.todos.filter(t => t.done).length;
  const highPriority = this.todos.filter(t => t.priority === '高').length;
  const today = this.todos.filter(t => t.date === this.getToday()).length;
  return {
    total, done, pending: total - done,
    completionRate: total > 0 ? Math.round(done / total * 100) : 0,
    highPriority, today
  };
}

四、总结

4.1 核心技术

  1. CRUD操作实现
  2. 列表筛选排序
  3. 数据统计聚合
  4. 本地持久化存储
  5. 状态驱动的UI更新

4.2 扩展方向

  1. 云端同步
  2. 标签分类
  3. 提醒通知
  4. 子任务管理
  5. 看板视图

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐