用 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 的练手样本。

相关推荐
alexhilton6 小时前
面向Android开发者的Google I/O 2026
android·kotlin·android jetpack
私人珍藏库6 小时前
【Android】豆图助手-永久HY-模拟微X~zfb各种截图
android·app·工具·软件·多功能
程序员陆业聪7 小时前
Shadow实战接入与生产落地:从零搭建到稳定运行
android
程序员陆业聪8 小时前
Shadow Transform:编译期的魔法——字节码替换实战
android
imuliuliang11 小时前
Laravel6.x核心特性全解析
android·php·laravel
idingzhi12 小时前
A股量化策略日报(2026年05月22日)
android·开发语言·python·kotlin
测试员周周13 小时前
【Appium 系列】第14节-断言与验证 — Validator 的设计
android·人工智能·python·功能测试·ios·单元测试·appium
赏金术士14 小时前
Android 动画对比指南:View 系统 vs Jetpack Compose
android·kotlin·compose
我命由我1234515 小时前
C++ - 面向对象 - 析构函数
android·c语言·开发语言·c++·visualstudio·visual studio·android runtime