How do you create a single button to perform action and navigation?

App Development
1

I am new at using SwiftUI with Xcode. I am trying to make a simple button (in ContentView.swift file) that performs an action (mathematical calculations), then moves to a second content view page. It seems I should be combining a Button action call then a NavigationLink.

How do I do this with just one button?
Thanks!
–Elliot

1 Like
2

this was written a while ago, but I do not see any responses. I am having trouble with this too.

3

@belen.bee

Is your question “how to navigate to another View from the current View?”

4

yes! it is.

5

@belen.bee

Here is some sample code that uses a NavigationLink to show the SecondView or a Button to show the SecondView.

The initial View (ContentView)

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

    var body: some View {
        NavigationStack {
            VStack(spacing: 20) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                Text("Initial View")

                Button {
                    showingSecondView = true
                } label: {
                    Text("Go to next screen (fullScreenCover)")
                }

                NavigationLink {
                    SecondView()
                } label: {
                    Text("Go to next screen (NavigationLink)")
                }
            }
            .padding()
            .navigationTitle("Navigation")
        }
        .fullScreenCover(isPresented: $showingSecondView) {
            SecondView()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

The SecondView

struct SecondView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        ZStack{
            Color.green
                .ignoresSafeArea()
            VStack(spacing: 20) {
                Text("Second View")
                Button {
                    dismiss()
                } label: {
                    Text("Dismiss")
                }
            }
        }
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        SecondView()
    }
}

The SecondView has a background color to make it obvious how the different Views are transitioned.

When you navigate to another View using a NavigationLink it transitions by sliding in from the right. It also provides a back Button in the navigation bar on the Second View to be able to tap to go back to the initial View. You get that for free when you use NavigationStack.

When you navigate to another View by presenting it as a .fullScreenCover() it transitions by sliding up from the bottom to cover the initial view. you don’t get a back Button at the top like you do using a NavigationLink so you have to use another method to dismiss that SecondView and return to the previous View. The method in this case (and there are other ways) is to declare a special Environment variable that facilitates dismissing a view.