SwiftUI的。如何在视图之间访问/操作数据

SwiftUI. How do I access/manipulate data between views

提问人:Tom Hanks 提问时间:6/13/2020 最后编辑:Masoud KeshavarzTom Hanks 更新时间:6/13/2020 访问量:221

问:

这段代码不是专门针对我的,但它会更清楚地显示我遇到的问题。它是费用计算应用程序的一部分。在视图之间传输数据后,我很难操作数据。我有 2 个视图,我想把所有费用加起来。部分问题在于,每次添加新的“费用”时,我都会创建一个类的新实例。

import SwiftUI

struct AddView: View {
    @Environment(\.presentationMode) var presentationMode
    @ObservedObject var expenses: Expenses

    @State private var name = ""
    @State private var type = "Personal"
    @State private var amount = ""
    static let types = ["Business", "Personal"]

    var body: some View {
        NavigationView {
            Form {
                TextField("Name", text: $name)

                Picker("Type", selection: $type) {
                    ForEach(Self.types, id: \.self) {
                        Text($0)
                    }
                }

                TextField("Amount", text: $amount)
                    .keyboardType(.numberPad)
            }
            .navigationBarTitle("Add new expense")
            .navigationBarItems(trailing: Button("Save") {
                if let actualAmount = Int(self.amount) {
                    let item = ExpenseItem(name: self.name, type: self.type, amount: actualAmount)
                    self.expenses.items.append(item)
                    self.presentationMode
                        .wrappedValue.dismiss()
                }
            })
        }
    }
}

第二视图

import SwiftUI

struct ExpenseItem: Identifiable, Codable {

let id = UUID()
let name: String
let type: String
let amount: Int
}

class Expenses: ObservableObject {
    @Published var items = [ExpenseItem]() {
        didSet {
            let encoder = JSONEncoder()

            if let encoded = try?
                encoder.encode(items) {
                UserDefaults.standard.set(encoded, forKey: "Items")
            }
        }
    }

    init() {
        if let items = UserDefaults.standard.data(forKey: "Items") {
            let decoder = JSONDecoder()

            if let decoded = try?
                decoder.decode([ExpenseItem].self, from: items) {
                self.items = decoded
                return
            }
        }
    }
}

struct ContentView: View {
    @ObservedObject var expenses = Expenses()
    @State private var showingAddExpense = false

    var body: some View {
        NavigationView {
            List {
                ForEach(expenses.items) { item in
                    HStack {
                        VStack {
                            Text(item.name)
                                .font(.headline)
                            Text(item.type)
                        }

                        Spacer()
                        Text("$\(item.amount)")
                    }
                }
                .onDelete(perform: removeItems)
            }
            .navigationBarTitle("iExpense")
            .navigationBarItems(trailing: Button(action: {
                self.showingAddExpense = true
            }) {
                Image(systemName: "plus")
                }
            )
            .sheet(isPresented: $showingAddExpense) {
                AddView(expenses: self.expenses)
            }
        }
    }

    func removeItems(at offsets: IndexSet) {
        expenses.items.remove(atOffsets: offsets)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
json swift swift3 swift2 swiftui

评论

0赞 zeterain 6/13/2020
这听起来像是别人写的代码,但你能分享你自己定制的部分吗?不幸的是,如果没有一些代码示例,将很难确定问题。
0赞 Tom Hanks 6/13/2020
我道歉。我不小心提交了帖子,而没有附上我的代码!这段代码来自“HackingWithSwift”,是他的“iExpenses”SwiftUI教程。我的应用程序以它为基础。重申一下,我正在尝试将费用金额将所有条目相加。希望这会有所帮助。谢谢!

答:

0赞 Andrew 6/13/2020 #1

这实际上取决于您要在哪里显示总数。最简单的解决方案是在所有费用列表之后的 上显示总数。ContentView

但首先我们需要计算总数。由于总数与我们的有关,因此它计算它是自己的总数是有道理的。ExpensesObservableObject

该类只有一个实例,并且包含结构的多个实例。我们将通过向类添加计算属性来解决这个问题。我已从您的示例中删除了一些代码,以突出显示我所做的更改。ExpensesExpenseItemExpenses

class Expenses: ObservableObject {
    @Published var items: [ExpenseItem]

    // ...

    // Computed property that calculates the total amount
    var total: Int {
        self.items.reduce(0) { result, item -> Int in
            result + item.amount
        }
    }
}

计算出的属性合计将所有金额减少为一个值。您可以在此处阅读有关reduce的更多信息,也可以在此处阅读有关计算属性的信息。我们不必使用 reduce,我们可以使用 for 循环并对值求和。我们也不必使用计算属性,我们可以使用函数。这真的取决于你想要什么。ExpenseItem

接下来,我们可以添加一个显示总数的视图。ContentViewList

struct ContentView: View {
    @ObservedObject var expenses = Expenses()
    @State private var showingAddExpense = false

    var body: some View {
        NavigationView {
            List {
                ForEach(expenses.items) { item in
                   // ...
                }
                .onDelete(perform: removeItems)

                // View that shows the total amount of the expenses
                HStack {
                    Text("Total")
                    Spacer()
                    Text("\(expenses.total)")
                }
            }
            // ...
    }
     // ...
}

这将为您提供如下所示的结果。

Image showing the iExpense app with a total

评论

0赞 Tom Hanks 6/14/2020
就是这样!谢谢你的回答,你把事情解释得非常好!