En este artículo veremos como podemos esconder las flechas de navegación o disclosure indicators que genera un NavigationLink en SwiftUI.
Para este ejemplo lo primero que vamos a hacer va a ser crear una lista o tabla usando List y ZStack de la siguiente forma:
import SwiftUI
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
}
}
}
}A continuación para poder hacer uso de NavigationLink y poder ir a otra vista cuando el usuario haga tap, vamos a crear un nuevo fichero SwiftUI View en Xcode, tenemos que ir a File -> New -> File from Template…
y una vez lo selecciones, elegiremos crear una nueva SwiftUI View de la siguiente forma:
En el nombre del fichero de vista de SwiftUI le he puesto “ListView.swift” pero puedes ponerle el nombre que más te guste.
Una vez estamos dentro de nuestra nueva vista llamada “ListView.swift” en Xcode, escribimos un código muy simple que servirá para presentar nuestra nueva vista usando NavigationLink.
import SwiftUI
struct ListView: View {
var body: some View {
Text("Welcome to View 2")
}
}Ya ves que el código es muy simple. Ahora volvemos a nuestro archivo “ContentView.swift” y añadimos el NavigationLink para poder navegar entre vistas de la siguiente forma:
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
NavigationLink(destination: ListView()) {
}
}
}
}
}Ahora al lado de nuestro primer y único item aparece una pequeña flecha indicando al usuario que al hacer tap en la pantalla puede abrir otra vista. En Xcode nuestro código quedaría de la siguiente manera:
Eliminando la flecha de navegación o disclosure indicator que crea el NavigationLink
A medida que creamos enlaces a vistas con NavigationLink, el sistema añade automaticamente un pequeña flecha de navegación o disclosure indicator. Si quieres eliminar o esconder estas flechas de navegación, SwiftUI no ofrece un modifier específico para controlar su visibilidad. Sin embargo puedes utilizar el modifier .opacity(0) para esconder las flechas.
En nuestro ejemplo, añadimos el modifier .opacity(0) de la siguiente forma:
struct ContentView: View {
var body: some View {
List {
ZStack(alignment: .leading){
NavigationLink(destination: ListView()) {
}
.opacity(0)
}
}
}
}Que en Xcode daría el siguiente resultado:
Como puedes ver la pequeña flecha de navegación o disclosure indicator ha desaparecido y si hacemos tap encima de nuestro item vacío, gracias al enlace que hemos creado con NavigationLink, podemos dirigir al usuario a una nueva vista, en este caso la que hemos creado anteriormente “ListView.swift”
Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram.
