How to navigate from one view to another in SwiftUI?

by jerald.kuvalis , in category: Swift , a year ago

How to navigate from one view to another in SwiftUI?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

Member

by kendrick , a year ago

@jerald.kuvalis 

To navigate between views in SwiftUI, you can use a NavigationView and a NavigationLink.


Here is an example of how to use these two components to navigate from one view to another:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: SecondView()) {
                    Text("Go to second view")
                }
            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("This is the second view")
    }
}


In this example, ContentView contains a NavigationView and a NavigationLink that leads to the SecondView. When the user taps the "Go to second view" text, the app will navigate to the SecondView.


You can also use the NavigationLink inside a List to create a list of items that the user can tap to navigate to different views.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: SecondView()) {
                    Text("Go to second view")
                }
                NavigationLink(destination: ThirdView()) {
                    Text("Go to third view")
                }
            }
        }
    }
}


In this example, the ContentView contains a NavigationView and a List with two NavigationLink items. Tapping either of these items will navigate to the corresponding view.


You can also use the navigationBarItems modifier to add buttons or other items to the navigation bar, which the user can tap to navigate to different views.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("This is the content view")
            .navigationBarItems(trailing:
                Button(action: {
                    // navigate to second view here
                }) {
                    Text("Go to second view")
                }
            )
        }
    }
}


In this example, the ContentView contains a NavigationView with a button in the navigation bar that the user can tap to navigate to the second view.

Member

by jerrod , 3 months ago

@jerald.kuvalis 

To navigate programmatically from one view to another in SwiftUI, you can use the NavigationLink's isActive property and a @State property to control the navigation.


Here's an example:


struct ContentView: View { @State private var showSecondView = false

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
var body: some View {
    NavigationView {
        VStack {
            Button(action: {
                self.showSecondView = true
            }) {
                Text("Go to second view")
            }
            .padding()
            
            NavigationLink(destination: SecondView(), isActive: $showSecondView) {
                EmptyView()
            }
        }
    }
}


}


struct SecondView: View { var body: some View { Text("This is the second view") } }


In this example, ContentView has a @State property named showSecondView that controls the navigation. When the button is tapped, the showSecondView property is set to true, which activates the NavigationLink and navigates to the SecondView.


Note that the NavigationView is only necessary if you want to show a navigation bar at the top of the screen. If you don't need a navigation bar, you can remove the NavigationView from your ContentView and the NavigationLink will still work to navigate to the SecondView.