How to Pass Data between View in SwiftUI

Aug 22, 2021 swiftui

How to Pass Data between View in SwiftUI

 

Passing the data form one View to another in SwiftUI

Pass Data between View in SwiftUI Before SwiftUI was introduce data passing was in ViewController was with Segue, Delegate and instant Properties. As Apple introduce SwiftUI it replaced the UIStoryboard. Entire coding structure in iOS application became change.

Initially In TableView Data passing was through DidSelect Method From one ViewController to Another ViewController As SwiftUI is Introduce UIStoryboard was Replaced With SwiftUI and TableView as exchange with the List.

Here are the steps of Pass Data between View in SwiftUI

Step 1: Create a List in ContentView in the body as Show in below Code

import SwiftUI

 

struct Contentview: View {

    var body: some View {

        List{

           Text("Hello")

        }

    }

}

Step 2: Create A Data of Type FoodList 

let foodList: [Food] =

        [Food(name"schezwan noodles", cuisine"Chinese"),

        Food(name"Pizza and pasta",  cuisine"Italian"),

    Food(name"Burger Light",  cuisine"American"),

    Food(name"Crispy French Fries", cuisine"French")]

 Step 3: Create a File of type Swift give the name as Food.swift create a model of Type Food as Show in below Code

import Foundation

 

struct Food : Identifiable,Codable, Hashable {

    var name: String?

    var cuisine: String?

}

Step 4: Add the Following Code in the the ContentView as  shown in Below code

import SwiftUI


struct Contentview: View {

    let foodList: [Food] =

        [Food(name: "schezwan noodles", cuisine: "Chinese"),

        Food(name: "Pizza and pasta"cuisine: "Italian"),

    Food(name: "Burger Light"cuisine: "American"),

    Food(name: "Crispy French Fries", cuisine: "French")]

 

    var body: some View {

        List(foodList, id: .self){ items in

            Text(items.name ?? "")

        }

    }

}

Step 5: To Add the Detail Screen Create a Swift File name it as MenuDetailView.swift 

add the var as foodDetail of type food declare it as shown below

@State var foodDetail: Food?

Add the Following code as shown below

struct MenuDetailView: View {

    @State var foodDetail: Food?

    var body: some View {

        Text(foodDetail?.name ?? "").padding()

        Text(foodDetail?.cuisine ?? "").padding().foregroundColor(.red)

    }

}

Step 6:  To Navigate From List Screen to Detail Screen we need to add NavigationLink using navigationView as Shown Below Code 

Give the navigationHeader Title As Food Items using the 

navigationTitle("Food Items")

Step 7:   Add the NavigationLink as Shown in below Code 

we can pass the data using the Navigation Link destination to which detail page we needed to pass the data

var body: some View {

        NavigationView {

            List(foodList, id: .self){ items in

                NavigationLink(destination: MenuDetailView(foodDetail: items)) {

                    Text(items.name ?? "").padding().foregroundColor(.accentColor)

                }

            }.edgesIgnoringSafeArea(.all).navigationTitle("Food Items")

        }

    }

Step 8:  The Detail Code of the Data Passing in the List Screen As Shown Below

struct Contentview: View {

 

    let foodList: [Food] =

        [Food(name: "schezwan noodles", cuisine: "Chinese"),

         Food(name: "Pizza and pasta"cuisine: "Italian"),

         Food(name: "Burger Light"cuisine: "American"),

         Food(name: "Crispy French Fries", cuisine: "French")]

 

    var body: some View {

        NavigationView {

            List(foodList, id: .self){ items in

                NavigationLink(destination: MenuDetailView(foodDetail: items)) {

                    Text(items.name ?? "").padding().foregroundColor(.accentColor)

                }

 

            }.edgesIgnoringSafeArea(.all).navigationTitle("Food Items")

        }

    }
 }
 
 
Index