En este artículo veremos como podemos crear nuestro propio botón Back personalizado. Así es como podemos implementarlo:
-Esconder el botón original de Atrás.
-Crear un botón Atrás personalizado y asignarlo como el botón izquierdo de la navigation bar.
Para esconder el botón Atrás por defecto, SwiftUI proporciona el modifier navigationBarBackButton. Poniendo su valor a true esconderá el botón Atrás original:
.navigationBarBackButton(true)Una vez el botón Atrás ha sido escondido, puedes reemplazarlo con tu propio botón. El modifier toolbar nos permite configurar los items de la barra de navegación. Creamos el botón Atrás personalizado usando ToolBarItem y asignando el botón en el lado izquierdo de la barra de navegación. Aquí está el código en Swift:
.toolbar{
ToolbarItem(placement: .navigationBarLeading){
Button(action: {
//Navigate to the previous screen
}) {
Image(systemName: "chevron.left.circle.fill")
.font(.largeTitle)
}
.tint(.white)
}
}En XCode da el siguiente resultado:
Te habrás dado cuenta que en el action del botón ha sido dejado en blanco. El botón se ha dibujado perfecto en el canvas pero el problema es que no funciona.
El botón original renderizado por NavigationStack puede automáticamente navegar a la anterior pantalla. Necesitamos programaticamente navegar atrás. Gracias a la variables de entorno que tenemos en el framework SwiftUI. Podemos usar la environment binding dismiss para cerrar la vista actual.
Solo nos queda declarar una variable dismiss de la siguiente manera para capturar la variable de entorno:
@Environment(\.dismiss) var dismissEn la action de nuestro botón Atrás personalizado, insertamos está linea de código:
dismiss()Llamamos al metódo dismiss() para descartar la vista de detalle cuando el botón Atrás es presionado.
