How to show a detail view from list item in SwiftUI?

Uplift iOS Interview

The Guide is for YOU if
  • You are preparing for an iOS interview and want to improve your skills and knowledge and looking to level up your interview game and land your dream job.
  • You want to gain confidence and ease during iOS interviews by learning expert tips and curated strategies.
  • You want access to a comprehensive list of iOS interview QA to practice and prepare.

You can use NavigationLink in the List modifier to show the detail view or a new view when user taps on the list item.

For example, we could create a simple DetailView which will be shown when list item is tapped. The main ContentView has list of chocolates and when user taps on the item it shows detail view with item name and the random amount of sugar.

struct DetailView: View {
    let chocolate: String
    let amountOfSugar: Int

    var body: some View {
        VStack {
            Text("\(chocolate)")
            Text("Sugar dencity \(amountOfSugar) %")
        }
    }
}

struct ContentView: View {
    let chocolates = ["Toblerone", "Bournville", "Snickers", "Twix", "Ferrero Rocher"]
    var body: some View {
        NavigationView {
            List(chocolates, id: \.self) { chocolate in
                NavigationLink(destination:
                                DetailView(chocolate: chocolate,
                                           amountOfSugar: (1...10).randomElement() as! Int))
                {
                    Text(chocolate)
                }
            }
        }
    }
}


✍️ Written by Ishtiak Ahmed

👉 Follow me on XLinkedIn



Get Ready to Shine: Mastering the iOS Interview




Enjoying the articles? Get the inside scoop by subscribing to my newsletter.

Get access to exclusive iOS development tips, tricks, and insights when you subscribe to my newsletter. You'll also receive links to new articles, app development ideas, and an interview preparation mini book.

If you know someone who would benefit from reading this article, please share it with them.