在 SwiftUI 中实现 MVVM 架构

MVVM（Model-View-ViewModel）是一种架构模式，适用于 SwiftUI 应用。它通过将业务逻辑与用户界面分离，提高了代码的可维护性和可测试性。以下是如何在 SwiftUI 中实现 MVVM 架构的示例。

1. 定义数据模型（Model）

首先，定义一个简单的数据模型，表示待办事项。

import Foundation

struct Task: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool = false
}

2. 创建视图模型（ViewModel）

视图模型将处理应用的业务逻辑，提供视图所需的数据，并响应用户交互。

import Combine

class TaskViewModel: ObservableObject {
    @Published var tasks: [Task] = []
    @Published var newTaskTitle: String = ""

    func addTask() {
        guard !newTaskTitle.isEmpty else { return }
        let newTask = Task(title: newTaskTitle)
        tasks.append(newTask)
        newTaskTitle = ""
    }

    func toggleTaskCompletion(task: Task) {
        if let index = tasks.firstIndex(where: { $0.id == task.id }) {
            tasks[index].isCompleted.toggle()
        }
    }

    func deleteTask(at offsets: IndexSet) {
        tasks.remove(atOffsets: offsets)
    }
}

3. 创建视图（View）

视图将呈现用户界面，依赖于视图模型提供的数据。

import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = TaskViewModel()

    var body: some View {
        NavigationView {
            VStack {
                TextField("New Task", text: $viewModel.newTaskTitle)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                Button(action: {
                    viewModel.addTask()
                }) {
                    Text("Add Task")
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(5)
                }

                List {
                    ForEach(viewModel.tasks) { task in
                        HStack {
                            Text(task.title)
                            Spacer()
                            if task.isCompleted {
                                Image(systemName: "checkmark")
                            }
                        }
                        .contentShape(Rectangle())
                        .onTapGesture {
                            viewModel.toggleTaskCompletion(task: task)
                        }
                    }
                    .onDelete(perform: viewModel.deleteTask)
                }
            }
            .navigationTitle("To-Do List")
            .padding()
        }
    }
}

4. 更新 App 主体

在 ToDoListApp.swift 中，使用 ContentView 作为主视图。

import SwiftUI

@main
struct ToDoListApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

5. 运行应用

现在，你可以运行应用。在模拟器或设备中，你应该能够添加任务，查看任务列表，标记任务为完成，和删除任务。

6. MVVM 架构的优点

  • 分离关注点：视图与业务逻辑分离，使代码更清晰。
  • 可测试性：视图模型可以单元测试，确保业务逻辑的正确性。
  • 数据绑定：SwiftUI 提供了强大的数据绑定机制，视图会自动更新以反映数据的变化。

7. 总结

通过这个示例，你学习了如何在 SwiftUI 应用中实现 MVVM 架构。你定义了数据模型，创建了视图模型以处理业务逻辑，并构建了视图以呈现用户界面。这种架构模式提高了代码的可维护性和可测试性，适合开发现代的 SwiftUI 应用。

Last Updated::