SwiftUI应用中实现实时累计金额显示的技术求助

核心思路 #

要实现实时累计总额，需要先存储所有交易记录，再通过计算属性实时求和——SwiftUI会自动在数据源变化时刷新相关视图。

具体实现步骤 #

1. 存储交易记录
   保留单个输入金额的@State变量，新增一个数组存储所有已添加的交易金额：

   @State private var amount = 0.0
   @State private var transactions: [Double] = []
   

2. 实时计算累计总额
   用计算属性对交易数组求和，数组更新时会自动重新计算：

   private var totalAmount: Double {
       transactions.reduce(0, +)
   }
   

3. 完善UI交互与格式处理
   用NumberFormatter统一金额的输入和显示格式，添加按钮将输入金额存入数组并清空输入框。

完整代码示例 #

import SwiftUI

struct ExpenseTrackerView: View {
    @State private var amount = 0.0
    @State private var transactions: [Double] = []
    
    private var totalAmount: Double {
        transactions.reduce(0, +)
    }
    
    // 统一金额格式（适配本地货币）
    private let currencyFormatter: NumberFormatter = {
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        formatter.locale = .current
        return formatter
    }()
    
    var body: some View {
        NavigationStack {
            VStack {
                // 顶部实时累计总额
                Text("累计总额: \(currencyFormatter.string(from: NSNumber(value: totalAmount)) ?? "$0.00")")
                    .font(.title)
                    .fontWeight(.bold)
                    .padding()
                
                // 金额输入区
                HStack {
                    TextField("输入金额", value: $amount, formatter: currencyFormatter)
                        .textFieldStyle(.roundedBorder)
                        .keyboardType(.decimalPad)
                    
                    Button("添加") {
                        transactions.append(amount)
                        amount = 0.0 // 清空输入框
                    }
                    .buttonStyle(.borderedProminent)
                }
                .padding(.horizontal)
                
                // 交易记录列表
                List(transactions, id: \.self) { amount in
                    Text(currencyFormatter.string(from: NSNumber(value: amount)) ?? "$0.00")
                }
                .listStyle(.plain)
            }
            .navigationTitle("费用记录")
        }
    }
}

#Preview {
    ExpenseTrackerView()
}

扩展说明 #

如果需要记录更复杂的交易信息（如备注、分类），可以定义自定义结构体：

struct Transaction: Identifiable {
    let id = UUID()
    let amount: Double
    let note: String?
}

此时累计总额的计算方式调整为：

private var totalAmount: Double {
    transactions.reduce(0) { $0 + $1.amount }
}

内容的提问来源于stack exchange，提问作者Greg