
Here is an example of a simple to-do list app in SwiftUI where users can add, remove, and mark tasks as completed. This example introduces list management and the List
view:
import SwiftUI
struct Task: Identifiable {
let id = UUID()
var title: String
var isCompleted: Bool
}
struct TodoListView: View {
@State private var tasks = [Task]()
@State private var newTaskTitle = ""
var body: some View {
NavigationView {
VStack {
HStack {
TextField("New Task", text: $newTaskTitle)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)
Button(action: {
addTask()
}) {
Text("Add")
.padding(.horizontal)
.padding(.vertical, 8)
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
List {
ForEach(tasks) { task in
HStack {
Text(task.title)
Spacer()
Button(action: {
toggleTaskCompletion(task: task)
}) {
Image(systemName: task.isCompleted ? "checkmark.square" : "square")
.foregroundColor(task.isCompleted ? .green : .gray)
}
}
}
.onDelete(perform: deleteTask)
}
.navigationBarTitle("To-Do List")
.navigationBarItems(trailing: EditButton())
}
}
}
private func addTask() {
if !newTaskTitle.isEmpty {
let newTask = Task(title: newTaskTitle, isCompleted: false)
tasks.append(newTask)
newTaskTitle = ""
}
}
private func toggleTaskCompletion(task: Task) {
if let index = tasks.firstIndex(where: { $0.id == task.id }) {
tasks[index].isCompleted.toggle()
}
}
private func deleteTask(at offsets: IndexSet) {
tasks.remove(atOffsets: offsets)
}
}
import SwiftUI
@main
struct TodoListApp: App {
var body: some Scene {
WindowGroup {
TodoListView()
}
}
}

Explanation:
- Task Model:
- A simple
Task
struct conforming toIdentifiable
to uniquely identify each task. It containsid
,title
, andisCompleted
properties.
- A simple
- TodoListView Struct:
- State Variables:
@State private var tasks = [Task]()
: Holds the list of tasks.@State private var newTaskTitle = ""
: Holds the title for the new task being added.
- NavigationView and VStack:
- Wraps the form and list in a
NavigationView
for a navigation bar. - Uses
VStack
to arrange the input field and list vertically.
- Wraps the form and list in a
- Adding New Tasks:
- A
TextField
for entering the new task’s title. - An
Add
button that calls theaddTask
function to add the task to the list.
- A
- List View:
- Displays the list of tasks using a
List
. - Each task has a
Text
view for the title and a button to toggle its completion status. - The
onDelete
modifier allows users to delete tasks by swiping.
- Displays the list of tasks using a
- Navigation Bar:
- Sets the navigation bar title to “To-Do List”.
- Adds an
EditButton
to enable the user to delete tasks.
- State Variables:
- Functions:
- addTask(): Adds a new task to the list if the input is not empty.
- toggleTaskCompletion(task:): Toggles the completion status of a task.
- deleteTask(at:): Deletes tasks from the list at the specified offsets.
How to Use:
- Copy the code into a new SwiftUI project in Xcode.
- Run the project on a simulator or device to see the to-do list in action.
- Use the text field to add new tasks, the checkmark button to mark tasks as completed, and the delete action to remove tasks from the list.