iOS SwiftUI Todo App 教程

SwiftUI 是苹果公司推出的一款全新的 UI 框架，用于构建 iOS、iPadOS、macOS 和 watchOS 应用。在这个教程中，我们将学习如何使用 SwiftUI 创建一个简单的 Todo 应用。

创建 Todo 列表

首先，我们需要创建一个 Todo 列表。每个 Todo 项将包含一个标题和一个是否完成的标记。

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

添加 Todo 项

接下来，我们将添加一个表单，让用户可以输入新的 Todo 项。

struct ContentView: View {
    @State private var newTodo = ""
    @State private var todos = [TodoItem]()

    var body: some View {
        NavigationView {
            List {
                ForEach(todos) { todo in
                    HStack {
                        Text(todo.title)
                        Spacer()
                        Button(action: {
                            todo.isCompleted.toggle()
                        }) {
                            Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                        }
                    }
                }
                .onDelete(perform: deleteTodo)
            }
            .navigationBarTitle("Todo List", displayMode: .inline)
            .navigationBarItems(trailing: Button(action: {
                todos.append(TodoItem(title: newTodo, isCompleted: false))
                newTodo = ""
            }) {
                Image(systemName: "plus")
            })
            .textField($newTodo)
            .padding()
        }
    }

    func deleteTodo(at offsets: IndexSet) {
        todos.remove(atOffsets: offsets)
    }
}

完成与未完成状态

我们使用 isCompleted 属性来跟踪每个 Todo 项的完成状态。当用户点击复选框时，isCompleted 的值将切换。

扩展阅读

想要了解更多关于 SwiftUI 的知识？请访问我们的 SwiftUI 教程 页面。

<center><img src="https://cloud-image.ullrai.com/q/todo_app/" alt="Todo App"/></center>