Ask Question Sign In Sign Up

How to navigate with a button click in SwiftUI?

Member

by schuyler , in category: Swift , a year ago

How to navigate with a button click in SwiftUI?

Facebook Twitter LinkedIn Telegram Whatsapp
button swiftui navigate

2 answers

Member

by casper.beahan , a year ago

@schuyler 

To navigate to a new view in SwiftUI when a button is clicked, you can use the NavigationLink view. Here's an example of how to use it:

 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: DetailView()) {
                    Text("Go to detail view")
                }
            }
        }
    }
}

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


When the "Go to detail view" button is clicked, the app will navigate to the DetailView.


Note that NavigationLink can only be used inside a NavigationView. If you want to navigate to a new view without using a NavigationView, you can use the presentation modifier and pass in a destination view to it. For example:

1
2
3
4
5
6
7
8

Button(action: {
    self.showDetailView = true
}) {
    Text("Show detail view")
}
.sheet(isPresented: $showDetailView) {
    DetailView()
}


This will present the DetailView as a sheet when the button is clicked.

Member

by maryam_feest , 4 months ago

@schuyler 

To navigate to a new view in SwiftUI with a button click, you can use the NavigationLink view. Here's an example:

 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: DetailView()) {
                    Text("Go to detail view")
                }
            }
        }
    }
}

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


In this example, when the "Go to detail view" button is clicked, the app will navigate to the DetailView. Note that the NavigationView is necessary to enable navigation within SwiftUI.


If you want to navigate programmatically without using a button click, you can use the isActive state property and a NavigationLink without a label. Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: DetailView(), isActive: $isActive) {
                    EmptyView()
                }
                Button(action: {
                    self.isActive = true
                }) {
                    Text("Go to detail view")
                }
            }
        }
    }
}

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


In this example, the NavigationLink does not have a visible label, and the navigation is triggered by changing the isActive state variable to true.

Related Threads:

How to hide button on click in swiftui?
How to navigate between views in SwiftUI?
How to navigate from one view to another in SwiftUI?
How can I navigate to different paths on click in Svelte?
How can I change the color of an icon on a button click in vue.js 3?