Mastering iOS App Development Using SwiftUI: The Future of Declarative UI Design

📘 Chapter 4: Navigation, Lists, and Forms in SwiftUI

🔍 Overview

Navigation is essential in building any multi-screen app, while lists and forms form the backbone of data presentation and user input. SwiftUI simplifies these interactions with elegant, declarative structures like NavigationStack, List, and Form.

In this chapter, you’ll learn:

• How to navigate between views using NavigationStack and NavigationLink
• How to present data using List
• How to collect structured user input using Form
• How to handle dynamic data with bindings
• Best practices for performance and design

🚪 1. Introduction to NavigationStack and NavigationLink

SwiftUI introduced NavigationStack in iOS 16 as a modern replacement for NavigationView, offering enhanced control over stack-based navigation.

✅ Basic Navigation Example

swift

struct HomeView: View {

    var body: some View {

        NavigationStack {

            NavigationLink("Go to Profile", value: "profile")

                .navigationDestination(for: String.self) { value in

                    if value == "profile" {

                        ProfileView()

                    }

                }

                .navigationTitle("Home")

        }

    }

}

🧱 Navigation Elements Table

📚 2. Building a Navigation Hierarchy

Let’s build a multi-screen app with three pages: Home → Profile → Settings.

swift

struct HomeView: View {

    var body: some View {

        NavigationStack {

            VStack {

                NavigationLink("Go to Profile") {

                    ProfileView()

                }

            }

            .navigationTitle("Home")

        }

    }

}

struct ProfileView: View {

    var body: some View {

        VStack {

            Text("User Profile")

            NavigationLink("Settings") {

                SettingsView()

            }

        }

        .navigationTitle("Profile")

    }

}

struct SettingsView: View {

    var body: some View {

        Text("App Settings")

            .navigationTitle("Settings")

    }

}

📝 3. Displaying Data with Lists

SwiftUI’s List makes it easy to build scrollable lists, including dynamic ones.

✅ Static List

swift

List {

    Text("Apple")

    Text("Banana")

    Text("Orange")

}

✅ Dynamic List

swift

let fruits = ["Apple", "Banana", "Orange"]

List(fruits, id: \.self) { fruit in

    Text(fruit)

}

✅ Custom List Row

swift

struct Contact: Identifiable {

    let id = UUID()

    let name: String

    let phone: String

}

let contacts = [

    Contact(name: "Alice", phone: "123456"),

    Contact(name: "Bob", phone: "654321")

]

List(contacts) { contact in

    HStack {

        VStack(alignment: .leading) {

            Text(contact.name).font(.headline)

            Text(contact.phone).font(.subheadline)

        }

    }

}

🔁 4. List Interactions: Delete, Reorder, Swipe

✅ Swipe to Delete

swift

@State private var items = ["Item 1", "Item 2", "Item 3"]

List {

    ForEach(items, id: \.self) { item in

        Text(item)

    }

    .onDelete { indexSet in

        items.remove(atOffsets: indexSet)

    }

}

✅ Reorder Items

swift

List {

    ForEach(items, id: \.self) { item in

        Text(item)

    }

    .onMove { indices, newOffset in

        items.move(fromOffsets: indices, toOffset: newOffset)

    }

}

📋 5. Gathering Input with Forms

SwiftUI's Form view is ideal for structured input, settings, and data collection.

✅ Basic Form Example

swift

@State private var name = ""

@State private var notificationsEnabled = true

Form {

    Section(header: Text("Profile")) {

        TextField("Name", text: $name)

    }

    Section(header: Text("Preferences")) {

        Toggle("Enable Notifications", isOn: $notificationsEnabled)

    }

}

🧾 Common Input Controls Table

✅ Example: Registration Form

swift

@State private var email = ""

@State private var password = ""

@State private var gender = "Male"

let genders = ["Male", "Female", "Other"]

Form {

    Section(header: Text("Login")) {

        TextField("Email", text: $email)

        SecureField("Password", text: $password)

    }

    Section(header: Text("Personal Info")) {

        Picker("Gender", selection: $gender) {

            ForEach(genders, id: \.self) { gender in

                Text(gender)

            }

        }

    }

}

🧠 6. Advanced Navigation with Data Passing

Use value-based navigation to pass data between screens.

✅ Navigation with Parameter

swift

struct ItemView: View {

    var itemName: String

    var body: some View {

        Text("Item: \(itemName)")

    }

}

NavigationLink("Show Item", value: "Book")

.navigationDestination(for: String.self) { item in

    ItemView(itemName: item)

}

📌 Best Practices

• Always use NavigationStack instead of NavigationView for new projects
• Use List with identifiable data (Identifiable protocol or id: \.self)
• Use Form sparingly for long forms—consider pagination or grouped views
• Use .onDelete and .onMove to add interactivity
• Wrap long list items in ScrollView if needed
• Use .navigationTitle() and .toolbar() for consistent navigation UX

📊 Feature Summary Table

📌 Conclusion

Navigation, lists, and forms are essential for creating intuitive and functional SwiftUI apps. SwiftUI’s declarative approach makes building these features faster, more readable, and more scalable.

With the ability to create dynamic lists, handle user input with ease, and navigate across multiple screens seamlessly, you’re now equipped to build real-world app interfaces.

In the next chapter, we’ll dive into animations, gestures, and user interactions—bringing your UIs to life.