【SwiftUI项目】0010、SwiftUI项目-费用跟踪-记账App项目-第2/3部分 -过滤日期详情明细页面以及抽离费用卡片

SwiftUI小功能模块系列
0001、SwiftUI自定义Tabbar动画效果
0002、SwiftUI自定义3D动画导航抽屉效果
0003、SwiftUI搭建瀑布流-交错网格-效果
0004、SwiftUI-＜探探App＞喜欢手势卡片
0005、SwiftUI-粘性动画指示器引导页
0006、SwiftUI自定义引导页动画
0007、SwiftUI聚光灯介绍说明
0008、SwiftUI-自定义启动闪屏动画-App启动闪屏曲线路径动画
0009、SwiftUI项目-费用跟踪-记账App项目-第1/3部分
0010、SwiftUI项目-费用跟踪-记账App项目-第2/3部分 -过滤日期详情明细页面以及抽离费用卡片

技术:SwiftUI、SwiftUI3.0、费用跟踪、记账、随手记
运行环境:
SwiftUI3.0 + Xcode13.4.1 + MacOS12.5 + iPhone Simulator iPhone 13 Pro Max

概述

使用SwiftUI做一个记账/费用追踪/随手记的项目
本次添加消费模块 其中标记为💰 是新增的内容 - 全局搜索💰 大概就是本次改动的内容

详细

一、运行效果

二、项目结构图

框选的是本次 比第一个版本新增的文件

三、程序实现 - 过程

思路:
1.创建首页 搭建头部 欢迎部分
2.搭建总费用模块
3. 搭建每笔支出收入的卡片
4. 将内容的第一个字母 作为图标展示
5. 视图模型提供 便捷的方法
6. 模型提供本地测试数据

1.创建一个项目命名为 ExpenseTracker

1.1.引入资源文件和颜色

颜色
BG #F2F3F6
Gray #A0B1C7
Green #12C7AA
Purple #8744E3
Red #ED4949
Yellow #F6C25A
Gradient1 #F2F3F6
Gradient2 #D06AF3
Gradient3 #F69080

随机图片5张

2. 创建一个虚拟文件New Group 命名为 View

2. 创建一个文件New File 选择SwiftUI View类型 命名为Home

3. 创建一个虚拟文件New Group 命名为 Model

3. 创建一个文件New File 选择SwiftUI View类型 命名为Expense 并改造成模型 继承于Identifiable,Hashable

主要是: 做模型 提供快速创建临时数据

4. 创建一个虚拟文件New Group 命名为 ViewModel

4. 创建一个文件New File 选择SwiftUI View类型 命名为ExpenseViewModel 类型是class 继承于ObservableObject

主要是: 提供View展示的数据 。让view通过视图模型能快速转换得到想展示的值 。比如测试提供的price是int类型。那么视图模型就要提供int价格转字符串价格的方法

5. 创建一个文件New File 选择SwiftUI View类型 命名为TransactionCardView

主要是用来显示首页列表的费用支付的卡片

💰6. 创建一个文件New File 选择SwiftUI View类型 命名为FilteredDetailView

💰7. 创建一个文件New File 选择SwiftUI View类型 命名为ExpenseCard - 抽离home的ExpenseCardView

Code

ContentView - 主窗口

主要是展示主窗口Home
💰 添加了一个导航NavigationView

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            Home().navigationBarHidden(true)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Home - 主页

1. 展示头部的欢迎信息 和 查看当月的消费收入明细
2. 费用总模块
3. 每笔费用的详细 - 支出、收入、日期、内容
   改动💰抽取 费用总模块、跳转到当月的消费收入明细

//
//  Home.swift
//  ExpenseTracker (iOS)
//
//  Created by lyh on 2022/8/20.
//

import SwiftUI

struct Home: View {
    @StateObject var expenseViewModel : ExpenseViewModel = .init()
    var body: some View{
        ScrollView(.vertical,showsIndicators: false) {
            VStack(spacing:12){
                HStack(spacing:15){
                    VStack(alignment:.center,spacing: 4){
                        Text("Welcome!")
                            .font(.caption)
                            .fontWeight(.semibold)
                            .foregroundColor(.gray)
                        
                        Text("宇夜iOS")
                            .font(.title2.bold())
                    }
                    .frame(maxWidth:.infinity,alignment: .leading)

                    NavigationLink {
                        FilteredDetailView()
                            .environmentObject(expenseViewModel)
                    } label: {
                        Image(systemName: "hexagon.fill")
                            .foregroundColor(.gray)
                            .overlay(content: {
                                Circle()
                                    .stroke(.white,lineWidth: 2)
                                    .padding(7)
                            })
                            .frame(width: 40, height: 40)
                            .background(Color.white,in: RoundedRectangle(cornerRadius: 10, style: .continuous))
                            .shadow(color: .black.opacity(0.1), radius: 5, x: 5, y: 5)
                    }
               
                }
                ExpenseCard()
                    .environmentObject(expenseViewModel)
                Transactions()

            }
            .padding()
        }
        .background{
            Color("BG")
                .ignoresSafeArea()
        }
    }
    // 卡片列表
    @ViewBuilder
    func Transactions() ->some View{
        VStack(spacing:15){
            Text("Transactions")
                .font(.title2.bold())
                .opacity(0.7)
                .frame(maxWidth:.infinity,alignment: .leading)
                .padding(.bottom)
            
            ForEach(expenseViewModel.expenses){ expense in
                // 交易卡视图
                TransactionCardView(expense: expense)
                    .environmentObject(expenseViewModel)
            }
            
            
        }
    }
    

    
  

}

struct Home_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

TransactionCardView - 费用卡片视图

//
//  TransactionCardView.swift
//  ExpenseTracker (iOS)
//
//  Created by lyh on 2022/8/20.
//

import SwiftUI

struct TransactionCardView: View {
    var expense: Expense
    @EnvironmentObject var expenseViewModel: ExpenseViewModel
    var body: some View {
        
        HStack(spacing:12){
            // 显示出首字母
            if let first = expense.remark.first {
                Text(String(first))
                    .font(.title.bold())
                    .foregroundColor(.white)
                    .frame(width:50,height:50)
                    .background{
                        Circle()
                            .fill(Color(expense.color))
                    }
            }
            
            Text(expense.remark)
                .fontWeight(.semibold)
                .lineLimit(1)
                .frame(maxWidth:.infinity,alignment: .leading)
            
            VStack(alignment: .trailing, spacing: 7) {
                // 显示的价格
                let price = expenseViewModel.convertNumberToPrice(value: expense.type == .expense ? -expense.amount : expense.amount)
                Text(price)
                    .font(.callout)
                    .opacity(0.7)
                    .foregroundColor(expense.type == .expense ? Color("Red") : Color("Green"))

                Text(expense.date.formatted(date:.numeric,time:.omitted))
                    .font(.caption)
                    .opacity(0.5)
                
                
            }
            
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 15,style: .continuous)
                .fill(.white)
        )
        
    }
}

struct TransactionCardView_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}

Expense - 模型

主要提供模型数据 以及测试数据

//
//  Expense.swift
//  ExpenseTracker (iOS)
//
//  Created by lyh on 2022/8/20.
//

import SwiftUI

// MARK: Expense Model And Sample Data
// 费用模型和样本数据
struct Expense: Identifiable,Hashable{
    var id = UUID().uuidString
    var remark: String
    var amount: Double
    var date: Date
    var type: ExpenseType
    var color: String
}

enum ExpenseType: String{
    case income = "Income"
    case expense = "expenses"
    case all = "ALL"
}

var sample_expenses: [Expense] = [
    Expense(remark: "Magic Keyboard", amount: 99, date: Date(timeIntervalSince1970: 1652987245), type: .expense, color: "Yellow"),
    Expense(remark: "Food", amount: 19, date: Date(timeIntervalSince1970: 1652814445), type: .expense, color: "Red"),
    Expense(remark: "Magic Trackpad", amount: 99, date: Date(timeIntervalSince1970: 1652382445), type: .expense, color: "Purple"),
    Expense(remark: "Uber Cab", amount: 20, date: Date(timeIntervalSince1970: 1652296045), type: .expense, color: "Green"),
    Expense(remark: "Amazon Purchase", amount: 299, date: Date(timeIntervalSince1970: 1652209645), type: .expense, color: "Yellow"),
    Expense(remark: "Stocks", amount: 2599, date: Date(timeIntervalSince1970: 1652036845), type: .income, color: "Purple"),
    Expense(remark: "In App Purchase", amount: 499, date: Date(timeIntervalSince1970: 1651864045), type: .income, color: "Red"),
    Expense(remark: "Movie Ticket", amount: 99, date: Date(timeIntervalSince1970: 1651691245), type: .expense, color: "Yellow"),
    Expense(remark: "Apple Music", amount: 25, date: Date(timeIntervalSince1970: 1651518445), type: .expense, color: "Green"),
    Expense(remark: "Snacks", amount: 49, date: Date(timeIntervalSince1970: 1651432045), type: .expense, color: "Purple"),
]

ExpenseViewModel - 视图模型

视图模型 主要提供 视图模型便利的方法

1. 比如
   正在获取当前月份日期字符串
2. 将费用换算成货币 - 计算总支付、支付、收入等部分
3. 把数字转换成价格
4. 💰添加了当月费用明细的tab选项 以及 将选定日期进行转换成字符串

import SwiftUI

class ExpenseViewModel: ObservableObject {
    @Published var startDate: Date = Date()
    @Published var endDate: Date = Date()
    @Published var currentMonthStartDate: Date = Date()

    
    // 💰费用/收入表
    @Published var tabName : ExpenseType = .expense
    
    init(){
        // 读取当前月份的起始日期
        let calendar = Calendar.current
        let components = calendar.dateComponents([.year,.month], from: Date())
        
        startDate = calendar.date(from: components)!
        currentMonthStartDate = calendar.date(from: components)!

    }
    
    // //你可以自定义更多的数据(Core Data)
    @Published var expenses : [Expense] = sample_expenses
    
    // 正在获取当前月份日期字符串
    func currentMonthDateString()->String{
        return currentMonthStartDate.formatted(date: .abbreviated, time: .omitted) + " - " + Date().formatted(date: .abbreviated, time: .omitted)
    }
    
    // 将费用换算成货币
    func convertExpensesToCurrency(expenses: [Expense],type:ExpenseType = .all)-> String {
        var value : Double = 0
        value = expenses.reduce(0, { partialResult, expense in
            return partialResult + (type == .all ? (expense.type == .income ? expense.amount : -expense.amount) : (expense.type == type ? expense.amount : 0))

        })
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        
        return formatter.string(from: .init(value: value)) ?? "$0.00"
    }
    
    
    // 把数字转换成价格
    func convertNumberToPrice(value: Double)->String{
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        
        return formatter.string(from: .init(value: value)) ?? "$0.00"
    }
    
    // 💰 将选定日期转换为字符串
    func convertDateToString() -> String{
        return startDate.formatted(date: .abbreviated, time: .omitted) + " - " +
        endDate.formatted(date: .abbreviated, time: .omitted)

    }


}

💰FilteredDetailView - 过滤日期详情页

主要展示 当个月的1号 到至今的一个收入与消费的详情页面

//
//  FilteredDetailView.swift
//  ExpenseTracker (iOS)
//
//  Created by lyh on 2022/8/21.
//

import SwiftUI

struct FilteredDetailView: View {
    @EnvironmentObject var expenseViewModel: ExpenseViewModel
    // 环境值
    @Environment(\.self) var env
    
    @Namespace var animation
    var body: some View {
        
        ScrollView(.vertical,showsIndicators: false){
            VStack(spacing:15){
                HStack(spacing:15){
                    // 返回按钮
                    Button  {
                        env.dismiss()
                    } label: {
                        Image(systemName: "arrow.backward.circle.fill")
                            .foregroundColor(.gray)
                            .frame(width: 40, height: 40)
                            .background(Color.white,in: RoundedRectangle(cornerRadius: 10, style: .continuous))
                            .shadow(color: .black.opacity(0.1), radius: 5, x: 5, y: 5)

                    }

                    
                    Text("Transactions")
                        .font(.title2.bold())
                        .frame(maxWidth:.infinity,alignment: .leading)

                    Button  {
                        
                    } label: {
                        Image(systemName: "slider.horizontal.3")
                            .foregroundColor(.gray)
                            .frame(width: 40, height: 40)
                            .background(Color.white,in: RoundedRectangle(cornerRadius: 10, style: .continuous))
                            .shadow(color: .black.opacity(0.1), radius: 5, x: 5, y: 5)
                    }

               
                }
                
                // 当前选择日期的费用卡视图
                ExpenseCard()
                    .environmentObject(expenseViewModel)
                
                CustomSegmentedControl()
                    .padding(.top)
                
                // 当前过滤日期与金额
                VStack(spacing:15) {
                    Text(expenseViewModel.convertDateToString())
                        .opacity(0.7)
                    Text(expenseViewModel.convertExpensesToCurrency(expenses: expenseViewModel.expenses, type: expenseViewModel.tabName))
                        .font(.title.bold())
                        .opacity(0.9)
                        .animation(.none,value:expenseViewModel.tabName)
                }
                .padding()
                .frame(maxWidth:.infinity)
                .background{
                    RoundedRectangle(cornerRadius: 15,style: .continuous)
                        .fill(.white)
                }
                .padding(.vertical,20)
                
                ForEach(expenseViewModel.expenses.filter{
                    return $0.type == expenseViewModel.tabName
                }){ expense in
                    TransactionCardView(expense: expense)
                        .environmentObject(expenseViewModel)
                }
                
            }
            .padding()

        }
        .navigationBarHidden(true)
        .background{
            Color("BG")
                .ignoresSafeArea()
        }

    }
    
    // 自定义分段控制
    @ViewBuilder
    func CustomSegmentedControl()-> some View{
        HStack(spacing:0){
            
            ForEach([ExpenseType.income,ExpenseType.expense],id:\.rawValue) {tab in
                
                Text(tab.rawValue.capitalized)
                    .fontWeight(.semibold)
                    .foregroundColor(expenseViewModel.tabName == tab ? .white : .black)
                    .opacity(expenseViewModel.tabName == tab ? 1 : 0.7)
                    .padding(.vertical,12)
                    .frame(maxWidth:.infinity)
                    .background{
                         // 与匹配的几何 
                        if expenseViewModel.tabName == tab {
                            RoundedRectangle(cornerRadius: 10, style: .continuous)
                                .fill(
                                    LinearGradient(colors: [
                                        Color("Gradient1"),
                                        Color("Gradient2"),
                                        Color("Gradient3"),
                                    ], startPoint: .topLeading, endPoint: .bottomTrailing)
                                )
                                .matchedGeometryEffect(id: "TAB", in: animation)
                        }
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        withAnimation {expenseViewModel.tabName = tab}
                    }
                
            }
        }
        .padding(5)
        .background{
            RoundedRectangle(cornerRadius: 10, style: .continuous)
                .fill(.white)
        }
       
    }
}

struct FilteredDetailView_Previews: PreviewProvider {
    static var previews: some View {
        FilteredDetailView().environmentObject(ExpenseViewModel())
    }
}

💰ExpenseCard - 费用卡片 - 从首页抽离

为什么要抽离 因为页面公用了

1. 首页用到
2. 过滤日期页面用到

import SwiftUI

struct ExpenseCard: View {
    
    @EnvironmentObject var expenseViewModel : ExpenseViewModel
    
    var body: some View {
        GeometryReader{proxy in
            RoundedRectangle(cornerRadius: 20,style: .continuous)
                .fill(.linearGradient(colors: [
                Color("Gradient1"),
                Color("Gradient2"),
                Color("Gradient3")],startPoint: .topLeading, endPoint: .bottomTrailing))
            
            
            VStack(spacing: 15){
                VStack(spacing:15){
                    // 当前月日期字符串
                    Text(expenseViewModel.currentMonthDateString())
                        .font(.callout)
                        .fontWeight(.semibold)
                    
                    // 本月费用价格
                    
                    Text(expenseViewModel.convertExpensesToCurrency(expenses: expenseViewModel.expenses))
                        .font(.system(size: 35, weight: .bold))
                        .lineLimit(1)
                        .padding(.bottom,5)

                }
                .offset(y:-10)
                
                HStack(spacing: 15){
                    Image(systemName: "arrow.down")
                        .font(.caption.bold())
                        .foregroundColor(Color("Green"))
                        .frame(width:30,height: 30)
                        .background(.white.opacity(0.7),in:Circle())
                    
                    VStack(alignment: .leading, spacing: 4) {
                        Text("Income")
                            .font(.caption)
                            .opacity(0.7)
                        
                        Text(expenseViewModel.convertExpensesToCurrency(expenses: expenseViewModel.expenses, type: .income))
                            .font(.callout)
                            .fontWeight(.semibold)
                            .lineLimit(1)
                            .fixedSize()
                    }
                    .frame(maxWidth:.infinity,alignment: .leading)
                    
                    
                    Image(systemName: "arrow.up")
                        .font(.caption.bold())
                        .foregroundColor(Color("Red"))
                        .frame(width:30,height: 30)
                        .background(.white.opacity(0.7),in:Circle())
                    
                    VStack(alignment: .leading, spacing: 4) {
                        Text("Expenses")
                            .font(.caption)
                            .opacity(0.7)
                        
                        Text(expenseViewModel.convertExpensesToCurrency(expenses: expenseViewModel.expenses, type: .expense))
                            .font(.callout)
                            .fontWeight(.semibold)
                            .lineLimit(1)
                            .fixedSize()
                    }
                }
                .padding(.horizontal)
                .padding(.trailing)
                .offset(y:15)
            }
            .foregroundColor(.white)
            .frame(maxWidth:.infinity,maxHeight: .infinity,alignment: .center)
        }
        .frame(height:220)
        .padding(.top)
    }
}

 费用卡片
//@ViewBuilder
//func ExpenseCardView() -> some View{
//
//}