skip to Main Content

I’m trying to create a custom back button on SwiftUI, but I can’t
figure out how to do it.

The idea is to hide the "Back" button at the top left that provides NavigationView, and make a custom button with the same functionality.

struct AnadirDatosViewA: View {
    @Environment(.presentationMode) var presentation
    
    var body: some View{
        NavigationView(){
            Color(red: 48 / 255, green: 49 / 255, blue: 54 / 255)
                .edgesIgnoringSafeArea(.all)
                .overlay(
                    VStack{
                        AnadirDatosExpB()
                        
                        HStack{
                            
                            NavigationLink(destination:NuevoExperimentoView()){
                                Text("Back") //HERE
                                
                                NavigationLink(destination:AnadirDatosExpA()){
                                    Text("Next")
                                        
                                }
                            }
                        }
                    }
                )
        }.navigationBarBackButtonHidden(true)
    }
}

Right now I’m "cheating" by using the view I want go go back as destination, but it doesn’t work the same…

What can I do?

2

Answers


  1. You can use the presentationMode var from the environment inside a Button:

    See the commented example below for a possible implementation.

    struct ContentView: View{
        
        var body: some View{
            // I am navigating with a Navigationlink, so there is
            // no need for it in the AnadirDatosViewA
            NavigationView {
                NavigationLink("show AnadirDatosViewA") {
                    AnadirDatosViewA()
                }
            }
        }
    }
    
    
    struct AnadirDatosViewA: View {
        @Environment(.presentationMode) var presentation
        
        var body: some View{
            // if you navigated to this by a Navigationlink remove the NavigationView
            Color(red: 48 / 255, green: 49 / 255, blue: 54 / 255)
                .edgesIgnoringSafeArea(.all)
                .overlay(
                    HStack{
                        // This Button will dismiss the View
                        Button("Back"){
                            // with help of th presentationMode from the environment
                            presentation.wrappedValue.dismiss()
                        }
                        // This NavigationLink can forward you to another view
                        NavigationLink("Next") {
                            TextView(text: "last")
                        }
                    }
                    // This will hide the back Button in this View
                ).navigationBarBackButtonHidden(true)
        }
    }
    // HelperView
    struct TextView: View{
        var text: String
        var body: some View{
            Text(text)
        }
    }
    
    Login or Signup to reply.
  2. It seems like presentationMode is going to be deprecated in the future, so instead you could also do

        @Environment(.dismiss) var dismiss
    

    paired with

    Button(action: {
                    dismiss()
                }, label: {
                    Image(systemName: "chevron.left")
                    Text(bookClub.bookTitle)
                        .fontWeight(.bold)
                })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search