用 Cursor 从零搭一个 Compose 本地记账 App:实战记录与源码解析

最近用 Cursor 做了一次完整的 Android 练手:从底部导航骨架,迭代成一个能「记一笔、按日查账、看统计」的 Compose 记账 Demo。

这不是上架产品,而是面向学习与功能验证的本地应用:数据只存在本机 Room 数据库,无账号、无云端同步,适合用来熟悉 Compose 声明式 UI、ViewModel 状态流和 Room 本地存储。

本文记录:为什么选 Cursor、项目能做什么、技术怎么搭、和 AI 协作时怎么提需求,并附上关键代码与目录说明,方便你复现或二次开发。

项目是什么?

ComposeApplication 是一个 Kotlin + Jetpack Compose 的本地记账应用,核心能力包括:

源码地址:https://github.com/shanxi789/ComposeApplication

模块 功能说明
首页 按日查看账单列表,展示当日收入、支出与结余
记一笔 新增/编辑账单:收入/支出切换、分类选择、金额校验、备注
日期筛选 顶部日期栏 + 日历,选择任意一天查看对应账单
我的 累计/本月统计、支出分类 Top、清空数据、关于

数据仅保存在本机,适合学习 Compose + Room 的完整数据流。

界面预览

为什么用 Cursor 做这个项目?

传统开发里,搭骨架、写 DAO、调 Compose 边距,往往要反复查文档。Cursor 的优势在于:

  1. 对话式迭代:用自然语言描述需求,由 AI 生成/修改代码,再在 IDE 里直接运行验证。
  2. 理解工程上下文:能根据现有包结构、命名风格补全 Repository、ViewModel,减少风格不一致的补丁代码。
  3. 适合分阶段交付:本项目就是典型「小步快跑」------先导航,再数据库,再筛选与统计,最后打磨 UI 细节。

实际迭代路径

  1. 底部导航 + 横向分页骨架 --- Scaffold + NavigationBar + HorizontalPager
  2. Room 本地库与记账 CRUD --- Entity、Dao、Repository
  3. 按日筛选与日历选日期 --- DateFilterState、日期范围查询
  4. 「我的」页统计与数据管理 --- Flow 聚合、分类排行、清空数据
  5. UI 打磨 --- 列表布局、金额最多 10 位数字校验、Edge-to-Edge 安全区

技术栈一览

类别 选型
语言 Kotlin
UI Jetpack Compose + Material3
架构 ViewModel + Repository
本地存储 Room(KSP 编译)
异步 Kotlin Coroutines + Flow
SDK minSdk 24,targetSdk 36

架构设计

采用分层结构,UI 不直接碰数据库:

UI (Compose Screen) → ViewModel → Repository → Dao + Room Database

主界面用 Scaffold 承载底部导航,HorizontalPager 切换「首页 / 我的」。数据层由 AccountRepository 统一封装按日、按月、全量查询和 CRUD。首页 HomeViewModel 用 StateFlow 管理选中日期、账单列表、当日汇总和弹窗状态。

数据库:库名 accounting_demo.db,表 account_records(金额、类型、分类、备注、创建时间戳)。

项目目录

app/src/main/java/com/shx/composeapplication/

  • MainActivity.kt --- 主 Activity,底部 Tab + 分页
  • AccountingApplication.kt --- 全局 Repository
  • data/ --- entity、dao、database、repository、model
  • ui/home、ui/profile --- 界面与 ViewModel
  • ui/theme --- Material3 主题
  • util/ --- 金额过滤、日期、格式化

想加功能时,建议优先看 ui/home、data/repository。

实现细节

  • 金额输入:AmountInputFilter 限制数字、最多 10 位。
  • 按日筛选:DateFilterBar + 日历,按 createdAt 时间戳区间查询。
  • 我的页统计:基于 Flow 本地聚合,无需网络。
  • Edge-to-Edge:enableEdgeToEdge() 与安全区处理。

如何运行

  1. 用 Android Studio 打开项目根目录
  2. Gradle 同步完成后连接设备或模拟器,运行 app 模块

命令行:./gradlew assembleDebug

和 Cursor 协作的心得

  1. 需求要具体,一次说清楚页面和数据行为。
  2. 一次只改一块,先 CRUD 再筛选再统计。
  3. 每步都编译运行,把错误反馈给 AI 继续修。
  4. 保持目录约定,后续扩展时 AI 更容易对齐风格。

后续可扩展

账单导出、自定义分类、图表统计、深色模式、数据备份等,Repository 分层已预留扩展空间。

小结

这个 Compose 记账 Demo 走通了 Compose UI → ViewModel → Repository → Room,并在 Cursor 里通过对话迭代完成,适合作为 Jetpack Compose + Room 的练手样本。

相关推荐
林九生1 小时前
【实用技巧】MySQL 绿色版一键路径更新脚本详解 —— update_path.bat 深度解析
android·数据库·mysql
故渊at2 小时前
第十三板块:Android 综合架构与未来演进 | 第三十一篇:Android 架构演进与 Fuchsia OS 的挑战
android·架构·宏内核·微内核·fuchsia·ipc 性能博弈
aqi002 小时前
一文速览 HarmonyOS 6.1.1 推出的十个新特性
android·华为·harmonyos·鸿蒙·harmony
matrixmind12 小时前
aiomysql:异步场景下的 MySQL 驱动
android·数据库·mysql·其他
随遇丿而安2 小时前
第8周:弹窗 / 提示组件全功能与弹窗优化
android
zh_xuan2 小时前
诡异Bug:输入框删除字符,却越删越多
android·bug
nwsuaf_huasir3 小时前
matlab绘制尺寸和字体合适的图片插入到latex的方法
android·开发语言·matlab
future_li3 小时前
Speed Tools:一套低侵入的 Android 插件化 + 动态换肤 + 字体切换框架
android
逐光老顽童3 小时前
用 Jetpack Compose + MVI 开发了一个 Authenticator 双因素认证应用
架构·kotlin
杊页3 小时前
第一板块:Android 系统基石与运行原理 | 第二篇:Android 编译、打包与安装机制
android·操作系统