How data is passed from one view to another in SwiftUI?

By | January 13, 2024

In SwiftUI, you can pass data from one view to another using the @State, @Binding, @ObservedObject, or @EnvironmentObject property wrappers. The appropriate choice depends on the nature of the data and the relationship between the views. Below are brief explanations and examples for each approach:

1. @State : Use @State to store simple values within a view.
Example :

struct ContentView: View {
    @State private var username: String = ""

    var body: some View {
        NavigationView {
            VStack {
                TextField("Username", text: $username)
                NavigationLink(destination: DetailView(username: username)) {
                    Text("Go to Detail View")
                }
            }
        }
    }
}

struct DetailView: View {
    var username: String

    var body: some View {
        Text("Welcome, \(username)!")
    }
}

2. @Binding : Use @Binding to pass a two-way binding to a value.
Example :

struct ContentView: View {
    @State private var username: String = ""

    var body: some View {
        NavigationView {
            VStack {
                TextField("Username", text: $username)
                NavigationLink(destination: DetailView(username: $username)) {
                    Text("Go to Detail View")
                }
            }
        }
    }
}

struct DetailView: View {
    @Binding var username: String

    var body: some View {
        Text("Welcome, \(username)!")
    }
}

3. @ObservedObject : Use @ObservedObject to pass an observable object between views.
Example :

class UserData: ObservableObject {
    @Published var username: String = ""
}

struct ContentView: View {
    @ObservedObject var userData = UserData()

    var body: some View {
        NavigationView {
            VStack {
                TextField("Username", text: $userData.username)
                NavigationLink(destination: DetailView(userData: userData)) {
                    Text("Go to Detail View")
                }
            }
        }
    }
}

struct DetailView: View {
    @ObservedObject var userData: UserData

    var body: some View {
        Text("Welcome, \(userData.username)!")
    }
}

4. @EnvironmentObject : Use @EnvironmentObject to pass shared data between views.
Example :

class UserData: ObservableObject {
    @Published var username: String = ""
}

struct ContentView: View {
    @StateObject var userData = UserData()

    var body: some View {
        NavigationView {
            VStack {
                TextField("Username", text: $userData.username)
                NavigationLink(destination: DetailView()) {
                    Text("Go to Detail View")
                }
            }
            .environmentObject(userData)
        }
    }
}

struct DetailView: View {
    @EnvironmentObject var userData: UserData

    var body: some View {
        Text("Welcome, \(userData.username)!")
    }
}

Choose the method that best fits your app’s architecture and the specific requirements of data sharing between views.

Leave a Reply

Your email address will not be published. Required fields are marked *