Saltar al contenido

Botón de retroceso personalizado para la barra de navegación de NavigationView en SwiftUI

Esta es la solución más completa que encomtrarás dar, pero primero estúdiala detenidamente y analiza si se puede adaptar a tu proyecto.

Solución:

TL;RD

Use esto para la transición a tu vista:

NavigationLink(destination: SampleDetails()) 

Agregue esto a la vista en sí:

@Environment(.presentationMode) var presentationMode: Binding

Luego, en una acción de botón o algo así, descarta la vista:

presentationMode.wrappedValue.dismiss()

código completo

De un padre, navegue usando NavigationLink

 NavigationLink(destination: SampleDetails()) 

En DetallesVer ocultar navigationBarBackButton y configure el botón de retroceso personalizado para liderar navigationBatItem,

struct SampleDetails: View 
    @Environment(.presentationMode) var presentationMode: Binding

    var btnBack : some View  Button(action: 
        self.presentationMode.wrappedValue.dismiss()
        ) 
            HStack 
            Image("ic_back") // set image here
                .aspectRatio(contentMode: .fit)
                .foregroundColor(.white)
                Text("Go back")
            
        
    

    var body: some View 
            List 
                Text("sample code")
        
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: btnBack)
    

SwiftUI 1.0

Parece que ahora puedes combinar el navigationBarBackButtonHidden y .navigationBarItems para obtener el efecto que está tratando de lograr.

Código

struct Navigation_CustomBackButton_Detail: View 
    @Environment(.presentationMode) var presentationMode
    
    var body: some View 
        ZStack 
            Color("Theme3BackgroundColor")
            VStack(spacing: 25) 
                Image(systemName: "globe").font(.largeTitle)
                Text("NavigationView").font(.largeTitle)
                Text("Custom Back Button").foregroundColor(.gray)
                HStack 
                    Image("NavBarBackButtonHidden")
                    Image(systemName: "plus")
                    Image("NavBarItems")
                
                Text("Hide the system back button and then use the navigation bar items modifier to add your own.")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color("Theme3ForegroundColor"))
                    .foregroundColor(Color("Theme3BackgroundColor"))
                
                Spacer()
            
            .font(.title)
            .padding(.top, 50)
        
        .navigationBarTitle(Text("Detail View"), displayMode: .inline)
        .edgesIgnoringSafeArea(.bottom)
        // Hide the system back button
        .navigationBarBackButtonHidden(true)
        // Add your custom back button here
        .navigationBarItems(leading:
            Button(action: 
                self.presentationMode.wrappedValue.dismiss()
            ) 
                HStack 
                    Image(systemName: "arrow.left.circle")
                    Text("Go Back")
                
        )
    

Ejemplo

Esto es lo que parece (extracto del libro “SwiftUI Views”):
Extracto del libro de vistas de SwiftUI

Basado en otras respuestas aquí, esta es una respuesta simplificada para la Opción 2 que funciona para mí en XCode 11.0:

struct DetailView: View 
    @Environment(.presentationMode) var presentationMode: Binding

    var body: some View 

        Button(action: 
           self.presentationMode.wrappedValue.dismiss()
        ) 
            Image(systemName: "gobackward").padding()
        
        .navigationBarHidden(true)

    

Nota: Para ocultar la barra de navegación, también necesitaba configurar y luego ocultar la barra de navegación en ContentView.

struct ContentView: View 
    var body: some View 
        NavigationView 
            VStack 
                NavigationLink(destination: DetailView()) 
                    Text("Link").padding()
                
             // Main VStack
            .navigationBarTitle("Home")
            .navigationBarHidden(true)

         //NavigationView
    

valoraciones y reseñas

Eres capaz de añadir valor a nuestra información dando tu experiencia en las explicaciones.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *