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")
}
}
}