Cursor AI 助手助力iOS应用功能快速迭代

在网站和iOS应用开发领域，沉浸式编码是一种常见的工作方式。目前已有两款应用成功上架App Store。

首款上架的应用名为Brush Tracker。这款应用旨在帮助用户追踪日常刷牙习惯，通过细微的激励提示保持行为一致性，从而维护口腔清洁。关于该应用的完整开发与上架过程，曾有一篇详细文章进行过阐述。

近期，开发者为Brush Tracker规划了一项新功能：一个类似日历的网格视图，用于直观展示用户每月的刷牙坚持情况。本文将详细介绍如何借助Cursor AI工具，并结合必要的手动调整，最终实现这一功能。

初始需求描述

设想的界面类似于常见的习惯追踪应用中的网格，或者GitHub上的贡献度图表。

开发过程从Cursor的“计划模式”开始。当需要添加新功能或进行重大改动时，这一模式被证明非常高效。开发者只需定义功能或解释任务，Cursor便会生成一份详细的实施计划。

以下是在计划模式中使用的确切提示词：

需要添加一个日历式网格来追踪用户完成刷牙的天数。网格由方块组成，每个方块代表一个月中的一天。网格中方块的初始状态为黑色。如果用户完成了当天所有刷牙次数，方块显示为绿色；如果部分完成，则显示为浅绿色。例如，用户设定的每日刷牙次数为2次。若某天只完成1次，对应方块应为浅绿色；若完成2次，则该天方块应为绿色。用户可通过点击屏幕左上角的日历图标访问此网格。

在最终确定实施计划前，Cursor提出了两个问题以澄清细节。这一步骤非常有用，因为它表明工具会主动寻求澄清，而非自行做出假设。

Cursor提出的两个问题是：

日历网格是仅显示当前月份，还是允许在月份之间导航？
追踪是从今天开始向前计算，还是也显示过去的日子（这些日子将显示为黑色）？

开发者指示Cursor允许月份导航，并将当月已过去的日期显示为黑色。随后，Cursor创建了一个Markdown文件，概述了详细的实施计划。

该计划详细解释了功能的实现方式，并包含一系列可执行的任务项。

Cursor列出的待办事项：

扩展BrushModel以持久化追踪历史每日刷牙数据
创建CalendarGridView组件，包含月份网格和颜色编码的方块
在ContentView的左上角添加日历图标按钮
使用sheet弹窗方式将CalendarGridView集成到ContentView中

接下来，开发者要求Cursor执行该计划。虽然可以在执行前修改计划，但此次选择完全按照Cursor的原始大纲进行。

实现过程一次成功，功能可以直接在Xcode模拟器中测试。然而，初始设计效果不佳：

初始网格设计效果图
注：本文所有图片均来自应用Brush Tracker的截图。

由于Xcode模拟器不再包含日期和时间设置，开发者通过更改Mac的系统日期来测试网格颜色在不同日期的更新情况。

对初始样式不满意，于是向Cursor提出了重新设计网格的提示：

需要改变网格的设计风格。理想效果类似于GitHub贡献度网格。此外，代表日期的方块中不要显示日期数字。

这个提示并未达到预期效果。它只移除了日期数字：

移除日期数字后的网格
随后，开发者分享了一张目标网格风格的示例图片，要求Cursor进行类似设计。

新设计更接近设想，但存在结构性问题。方块太小，在布局中缩放效果不好：

调整后但仍存在问题的网格设计
这个设计存在两个主要问题：

每个月显示42个方块（与实际天数不符）。
方块尺寸过小。

针对第一个问题，向Cursor发出了以下修正提示：

当前实现中，十一月和十二月都显示了42个方块。网格中的方块代表一个月中的天数，因此方块数量必须与该月的实际天数相等。

第二个问题相对简单，可以通过调整参数值来解决。例如，网格中方块的大小可以通过squareSize参数修改：

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int
private let squareSize: CGFloat = 8 // 修改此参数

将方块尺寸调整为32后，网格效果如下：

调整方块尺寸后的网格
另一个可通过参数调整的问题是行间距。

在上面的截图中，行与行之间似乎没有空隙。这可以通过增加行间距来改变。

此外，希望每行显示8个方块（即代表8天），并调整行间距。

所有这些调整都可以在以下代码片段中完成：

// 日历网格 - 精简GitHub风格
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: model.brushesPerDay,
                        size: 32
                    )
                    .padding(.bottom, 3)
                }
            }