一、项目功能
1、收入/支出记录：用户通过输入账单类型、金额，记录自己的消费，具体包括类别、金额、时间等。
2、今日明细记录查看：用户可查看当天所有的账目。
3、账单功能：为用户生成本月内每一天的收入支出情况。
4、统计功能：用户可以查看不同类别的收支统计情况，了解自己具体在不同类别中的支出或收入情况。
5、账户管理：用户可预先输入每月的预算，该app会根据每天收支情况和剩余金额等，提供剩余预算统计以及建议每日用度。
二、页面分布结构解读
1、首页：index.ets
2、明细查看页面：detailed.ets
3、收入/支出操作页面：addAccounts.ets
4、账单情况页面：bill.ets
5、类别收支统计页面： statistics.ets
6、账号管理页面：mine.ets
三、页面创建
创建结果如下：
页面结构解读：
├──entry/src/main/ets // 代码区
│ ├──entryability
│ │ └──EntryAbility.ets // 程序入口类
│ ├──model
│ │ └──TaskModel.ets // 数据库操作类
│ ├──pages
│ │ └──bill.ets // 账单页面
│ │ └──detailed.ets // 明细页面
│ │ └──addAccounts.ets // 收入/支出操作页面
│ │ └──Index.ets // 首页
│ │ └──mine.ets // 我的信息页面
│ │ └──statistics.ets // 收支统计页面
│ └──viewmodel
│ │ └──classInfo.ets // 获取收支情况类别
│ │ └──detailedInfo.ets // 获取账单明细
│ └──views
│ │ └──amountOanel.ets // 明细金额弹出框
│ │ └──budgetPanel.ets //预算弹出框
四、首页布局
首页具体功能为：提供一个导航栏，分别为明细、账单、添加账目信息、收支统计、我的信息五个图标，分别用于跳转到各自页面进行操作。
具体代码如下：
@Entry
@Component
struct Index {
build() {
Column() {
Row(){
//明细图标：用于跳转到明细详情页
Column(){
Image($r('app.media.detailed'))
.width(50)
Text('明细')
.fontSize(15)
}
.width(70)
//账单图标：用于跳转到账单页
Column(){
Image($r('app.media.bill'))
.width(45)
Text('账单')
.fontSize(15)
}
.width(70)
//添加图标：用于添加一笔账目信息
Column(){
Button('+')
.fontSize(60)
.backgroundColor(Color.Pink)
.borderColor(Color.Black)
}
.width(90)
//存钱图标：用于跳转到存钱页面
Column(){
Image($r('app.media.statistics'))
.width(40)
.margin({bottom: 7})
Text('统计')
.fontSize(15)
}
.width(70)
//我的图标：用于跳转到账号管理页面
Column(){
Image($r('app.media.mine'))
.width(40)
Text('我的')
.fontSize(15)
}
.width(70)
}
.width('100%')
.height(100)
.position({x: 0,y: 690})
}
.width('100%')
.height('100%')
.backgroundImage($r('app.media.background'))
.backgroundImageSize({width: 370, height: 750})
}
}
五、明细页面布局
该页面用于展示一天的收支的详细情况，首先为标题行，包括返回主页面的按钮以及该页面标题，然后通过List遍历当日所有的收支情况并显示在页面。
具体代码如下：
import detailedInfo from '../viewmodel/detailedInfo'
@Entry
@Component
struct Detailed {
//明细
details: detailedInfo[] = [
new detailedInfo('购物',$r('app.media.img29'),6.00),
new detailedInfo('运动',$r('app.media.img28'),10)
]
//日期
date = new Date();
build() {
Column(){
//标题栏一行：包含返回按钮以及标题
Row(){
Image($r('app.media.back'))
.width(50)
.borderRadius(50)
Text('今日账目明细')
.fontSize(30)
}
.width('100%')
.margin({bottom: 30})
//显示日期：通过Date的函数获取日期，以年/月/日的形式展示
Row(){
Text(this.date.getFullYear()+'/'+this.date.getMonth()+'/'+this.date.getDate())
.fontSize(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.padding({left: 10, right: 10})
.margin({bottom: 10})
//明细列表
Row(){
List(){
ForEach(
this.details,
(item: detailedInfo) => {
ListItem(){
Row(){
Row(){
Image(item.img)
.width(50)
.borderRadius(50)
Text(item.name)
.fontSize(25)
.margin({left: 10})
}
Text('￥' + item.amount.toFixed(2))
.fontSize(25)
.fontColor(Color.Red)
}
.width('100%')
.padding({left: 10, right: 10})
.margin({top: 10})
.justifyContent(FlexAlign.SpaceBetween)
}
}
)
}
}
.width('90%')
.backgroundColor(Color.White)
.borderRadius(20)
.shadow({radius: 20,color: Color.Black,offsetX: 0,offsetY: 0})
}
.width('100%')
.height('100%')
.backgroundColor('#ffbfe8fd')
}
}
