SwiftUI-与Swift相比，如何在应用程序中正确使用func/struct？

我对整个SwiftUI概念仍然是完全陌生的，我发现与其他编程风格（或者让我们称之为更老的编程风格）相比，它是相当困难的。我知道这听起来很傻，但我仍然不理解如何使用函数的概念。在大多数教程中，它们使用了大量的结构和计算属性，显然没有太多的函数（但为什么？）。虽然我可以设计出好看的应用程序，而且SwiftUI与普通的Swift/UIKit相比非常简单，但我不知道如何用有意义的代码填充我的应用程序，使它们真正发挥作用

好的，这里是一些带有函数的示例代码。这是正确的方法还是应该使用structs或其他方法

此代码允许用户输入一个数字，当按下按钮时，“5”被添加到数字中，结果显示在文本字段上方。没什么特别的，但我的问题是，人们会使用这样的函数，还是有更好的方法使用SwiftUI

struct ContentView: View {
    @State private var result: String = "0"
    @State private var number: String = ""
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Result:")
                .font(.title)
                .fontWeight(.bold)
            Text(String(result)).padding()
            Text("Enter a number:")
                .font(.title)
                .fontWeight(.bold)
            TextField("Enter a number", text: $number)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
            Button("Add 5") {
                result = AddFive()
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .padding()
                .foregroundColor(.white)
                .background(Color.red)
                .cornerRadius(40)
                .padding(.horizontal, 20)
        }
        .padding()
    
    }
    
    func AddFive() -> String {
        let num = Int(number) ?? 0
        let result = num + 5
        return String(result)
    }
    
}

---

当然，在这种情况下我可以使用computed属性，但我考虑的是更复杂的代码。在Swift中，我只是将一个函数置于另一个函数之上。

您最初的方法基本上是好的。只有几点：

• 如果可能，尽量不要将数字存储为

  String

  变量。使用

  Int

  进行数据操作

• 如果需要解析

  字符串中的数字

  输入，可以使用计算属性

• 简单的功能可以直接放在按钮内。它们也可以提取为方法。然而，更复杂的逻辑通常存储在一些

  @ObservedObject

  中，这就是为什么视图中没有太多函数的原因。逻辑被移到视图之外

您可以尝试以下方法：

struct ContentView: View {
    @State private var result = 0 // <- store as number
    @State private var numberInput: String = ""
    
    var number: Int { // <- computed property for calculations using `numberInput`
        Int(numberInput) ?? 0
    }

    var body: some View {
        VStack(alignment: .leading) {
            Text("Result:")
                .font(.title)
                .fontWeight(.bold)
            Text("\(result)") // <- display `Int` in `Text` views
                .padding()
            Text("Enter a number:")
                .font(.title)
                .fontWeight(.bold)
            TextField("Enter a number", text: $numberInput)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
            Button("Add 5") {
                self.result = self.number + 5
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(40)
            .padding(.horizontal, 20)
        }
        .padding()
    }
}

---

我想大多数情况下，你会从一个事件中触发一个动作，比如按钮动作。您可以直接在按钮操作中执行命令，也可以像上面那样将代码外包给函数。主要是修改类/结构数据或更改状态/绑定。有许多不同的方法，但请确保您的上述方法效果良好。当您的应用程序增长时，您开始使用func/struct。加入一些网络来进行更深入的讨论。

class ViewModel: ObservableObject {
    @Published var result = 0
    @Published var numberInput: String = ""
    
    var number: Int {
        Int(numberInput) ?? 0
    }
    
    func incrementNumber(by number: Int) {
        self.result = self.number + number
    }
}

struct ContentView: View {
    @ObservedObject private var viewModel = ViewModel()
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Result:")
                .font(.title)
                .fontWeight(.bold)
            Text("\(viewModel.result)").padding()
            Text("Enter a number:")
                .font(.title)
                .fontWeight(.bold)
            TextField("Enter a number", text: $viewModel.numberInput)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .keyboardType(.numberPad)
            Button("Add 5") {
                self.viewModel.incrementNumber(by: 5)
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding()
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(40)
            .padding(.horizontal, 20)
        }
        .padding()
    }
}