用 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 的优势在于:
- 对话式迭代:用自然语言描述需求,由 AI 生成/修改代码,再在 IDE 里直接运行验证。
- 理解工程上下文:能根据现有包结构、命名风格补全 Repository、ViewModel,减少风格不一致的补丁代码。
- 适合分阶段交付:本项目就是典型「小步快跑」——先导航,再数据库,再筛选与统计,最后打磨 UI 细节。
实际迭代路径
- 底部导航 + 横向分页骨架 — Scaffold + NavigationBar + HorizontalPager
- Room 本地库与记账 CRUD — Entity、Dao、Repository
- 按日筛选与日历选日期 — DateFilterState、日期范围查询
- 「我的」页统计与数据管理 — Flow 聚合、分类排行、清空数据
- 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() 与安全区处理。
如何运行
- 用 Android Studio 打开项目根目录
- Gradle 同步完成后连接设备或模拟器,运行 app 模块
命令行:./gradlew assembleDebug
和 Cursor 协作的心得
- 需求要具体,一次说清楚页面和数据行为。
- 一次只改一块,先 CRUD 再筛选再统计。
- 每步都编译运行,把错误反馈给 AI 继续修。
- 保持目录约定,后续扩展时 AI 更容易对齐风格。
后续可扩展
账单导出、自定义分类、图表统计、深色模式、数据备份等,Repository 分层已预留扩展空间。
小结
这个 Compose 记账 Demo 走通了 Compose UI → ViewModel → Repository → Room,并在 Cursor 里通过对话迭代完成,适合作为 Jetpack Compose + Room 的练手样本。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)