0
0
iOS Swiftmobile~20 mins

NavigationLink in iOS Swift - Mini App: Build & Ship

Choose your learning style9 modes available
Build: Home Screen
This screen shows a list of items. When you tap an item, it navigates to a detail screen showing the item name.
Target UI
Home Screen
----------------
| Item 1       |
| Item 2       |
| Item 3       |
----------------

Tap an item to see details.
Use NavigationLink to navigate from the list to a detail screen.
The detail screen must display the selected item's name.
Use a NavigationView to enable navigation.
Display a list of three items: Item 1, Item 2, Item 3.
Starter Code
iOS Swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                // TODO: Add NavigationLinks here
            }
            .navigationTitle("Home Screen")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct DetailView: View {
    var itemName: String
    var body: some View {
        Text(itemName)
            .font(.largeTitle)
            .navigationTitle("Detail")
    }
}
Task 1
Task 2
Solution
iOS Swift
import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3"]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                NavigationLink(destination: DetailView(itemName: item)) {
                    Text(item)
                }
            }
            .navigationTitle("Home Screen")
        }
    }
}

struct DetailView: View {
    var itemName: String
    var body: some View {
        Text(itemName)
            .font(.largeTitle)
            .navigationTitle("Detail")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

We use a NavigationView to enable navigation in the app. Inside it, a List shows three items. Each item is wrapped in a NavigationLink that points to DetailView, passing the item name. When the user taps an item, the app navigates to the detail screen showing the selected item name. The navigationTitle sets the title for each screen.

Final Result
Completed Screen
Home Screen
----------------
| Item 1       |
| Item 2       |
| Item 3       |
----------------

User taps "Item 2"

Detail Screen
----------------
|    Item 2    |
----------------
User taps on an item in the list.
App navigates to the detail screen showing the tapped item's name.
User can swipe back or tap back button to return to Home Screen.
Stretch Goal
Add a button on the Home Screen navigation bar that shows an alert with a welcome message.
💡 Hint
Use the .toolbar modifier with a Button and .alert modifier on the view.