SwiftUI 极简教程 06：让代码更加优雅

2023-10-21 11:22:36

在编写 SwiftUI 代码时，我们经常会遇到代码重复的问题。例如，在不同的视图中使用相同的代码块，或者在同一个视图中使用相同的代码块多次。这种重复的代码不仅会使代码看起来杂乱无章，而且还会增加代码出错的可能性。

为了解决这个问题，我们可以使用 SwiftUI 的内置功能来实现代码复用。例如，我们可以使用 View 结构体来定义一个可重用的视图，然后在不同的视图中使用这个 View 结构体。我们也可以使用 @State 属性包装器来定义一个可观察的属性，然后在不同的视图中使用这个可观察的属性。

除了使用 SwiftUI 的内置功能来实现代码复用之外，我们还可以使用 MVVM 架构来组织我们的代码。MVVM 架构将我们的代码分为三个部分：模型、视图和视图模型。模型负责处理数据，视图负责显示数据，视图模型负责协调模型和视图之间的交互。

使用 MVVM 架构可以使我们的代码更加整洁和易于维护。首先，MVVM 架构将我们的代码分为三个独立的部分，这使得我们的代码更容易阅读和理解。其次，MVVM 架构使我们能够将数据和视图逻辑分离，这使得我们的代码更容易扩展和维护。

在本章中，你将学习如何使用 SwiftUI 的内置功能来实现代码复用，并了解如何使用 MVVM 架构来组织你的代码。通过这些技巧，你将能够写出更具可维护性、更易于扩展的 SwiftUI 代码。

代码复用

代码复用是指在不同的代码块中使用相同的代码。在 SwiftUI 中，我们可以使用 View 结构体和 @State 属性包装器来实现代码复用。

`View` 结构体

View 结构体是一个可重用的视图。我们可以使用 View 结构体来定义一个视图，然后在不同的视图中使用这个视图。例如，我们可以使用 View 结构体来定义一个按钮，然后在不同的视图中使用这个按钮。

struct MyButton: View {
    var body: some View {
        Button(action: {}) {
            Text("Button")
        }
    }
}

我们可以通过以下方式在不同的视图中使用 MyButton 视图：

struct MyView: View {
    var body: some View {
        VStack {
            MyButton()
            MyButton()
        }
    }
}

`@State` 属性包装器

@State 属性包装器是一个可观察的属性。我们可以使用 @State 属性包装器来定义一个属性，然后在不同的视图中使用这个属性。例如，我们可以使用 @State 属性包装器来定义一个计数器，然后在不同的视图中使用这个计数器。

struct MyView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button(action: { count += 1 }) {
                Text("Increment")
            }
        }
    }
}

我们可以通过以下方式在不同的视图中使用 count 属性：

struct MyOtherView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button(action: { count += 1 }) {
                Text("Increment")
            }
        }
    }
}

MVVM 架构

MVVM 架构是一种软件设计模式。MVVM 架构将我们的代码分为三个部分：模型、视图和视图模型。模型负责处理数据，视图负责显示数据，视图模型负责协调模型和视图之间的交互。

模型

模型是一个包含数据的对象。模型可以是任何东西，例如一个 struct、一个 class 或者一个 enum。模型通常会包含一些属性和方法。属性是模型的数据，方法是模型的操作。

struct Person {
    var name: String
    var age: Int

    func sayHello() {
        print("Hello, my name is \(name) and I am \(age) years old.")
    }
}

视图

视图是一个显示数据的对象。视图可以是任何东西，例如一个 struct、一个 class 或者一个 enum。视图通常会包含一些子视图和一些属性。子视图是视图的组成部分，属性是视图的数据。

struct PersonView: View {
    var person: Person

    var body: some View {
        VStack {
            Text(person.name)
            Text("\(person.age) years old")
        }
    }
}

视图模型

视图模型是一个协调模型和视图之间的交互的对象。视图模型可以是任何东西，例如一个 struct、一个 class 或者一个 enum。视图模型通常会包含一些属性和方法。属性是视图模型的数据，方法是视图模型的操作。

struct PersonViewModel {
    @Published var person: Person

    init(person: Person) {
        self.person = person
    }

    func incrementAge() {
        person.age += 1
    }
}

我们可以通过以下方式使用 MVVM 架构来编写 SwiftUI 代码：

struct MyView: View {
    @ObservedObject var viewModel = PersonViewModel(person: Person(name: "John", age: 30))

    var body: some View {
        VStack {
            Text(viewModel.person.name)
            Text("\(viewModel.person.age) years old")
            Button(action: { viewModel.incrementAge() }) {
                Text("Increment Age")
            }
        }
    }
}