创建一个完整的 SwiftUI 应用

在本指南中，我们将创建一个简单的 SwiftUI 应用，展示如何构建一个基本的待办事项（To-Do List）应用。这个应用将包含添加任务、显示任务列表、标记任务为完成以及删除任务的功能。

1. 创建项目

打开 Xcode，选择 "Create a new Xcode project"，然后选择 "App" 模板。输入项目名称（例如 "ToDoList"），选择 Swift 作为编程语言，SwiftUI 作为用户界面。

2. 定义数据模型

首先，我们需要定义一个数据模型来表示待办事项。

import Foundation

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

3. 创建视图模型

接下来，我们将创建一个视图模型来管理任务的状态。

import Combine

class TaskViewModel: ObservableObject {
    @Published var tasks: [Task] = []
    
    func addTask(title: String) {
        let newTask = Task(title: title)
        tasks.append(newTask)
    }
    
    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)
    }
}

4. 创建主视图

在 ContentView 中，我们将创建一个用户界面，允许用户添加任务并显示任务列表。

import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = TaskViewModel()
    @State private var newTaskTitle: String = ""
    
    var body: some View {
        NavigationView {
            VStack {
                TextField("New Task", text: $newTaskTitle)
                    .padding()
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                
                Button(action: {
                    viewModel.addTask(title: newTaskTitle)
                    newTaskTitle = ""
                }) {
                    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()
        }
    }
}

5. 更新 App 主体

在 ToDoListApp.swift 文件中，我们将使用 ContentView 作为主视图。

import SwiftUI

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

6. 运行应用

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

7. 总结

  • 数据模型：使用 Task 结构表示任务。
  • 视图模型：使用 TaskViewModel 管理任务列表的状态。
  • 用户界面：使用 SwiftUI 组件构建添加任务和显示任务列表的界面。
  • 交互：实现了任务的添加、完成和删除功能。

通过这个简单的应用示例，你可以了解到如何使用 SwiftUI 和 Combine 创建一个完整的应用。根据需求，你可以进一步扩展功能，例如添加持久化存储、过滤任务、编辑任务等。

Last Updated::