Skip to main content
Version: Next 🚧

分析需求

按照网页版待办清单程序的展示效果,我们构建的待办清单程序界面应该包含以下内容:

  • 标题,显示当前时间
  • 任务数量
  • All、Active、Completed 三种筛选按钮
  • 任务输入框
  • 任务列表
    • 状态图标
    • 任务名称
    • 删除图标

界面的布局是:

  • 标题独占一行
  • 任务数量和三个状态筛选按钮占一行,筛选按钮靠右对齐
  • 输入框独占一行
  • 每个任务占一行,包含状态图标、名称和删除按钮
  • 状态图标和删除图标位于两端且尺寸固定,任务名称在中间,宽度占满剩余空间
  • 主界面水平居中、垂直居中

界面的交互效果是:

  • 点击 All 时显示全部状态的任务
  • 点击 Active 时显示未完成的任务
  • 点击 Completed 时显示已完成的任务
  • 当前任务总数会随着筛选条件自动更新
  • 在输入框中输入文本按回车后,向任务列表追加该任务,并清空输入框
  • 点击任务名称左边的状态图标会切换任务状态,已完成是绿色背景的勾,未完成则是圆圈
  • 点击任务名称右边的删除图标,会删除该任务

结合上述需求,程序内部记录的任务列表应该包含每个任务的状态和名称。为了满足交互需求,还需要实现任务列表数据的增删操作。