En este artículo veremos como podemos esconder el disclosure indicator en SwiftUI. Una lista es una de las vistas más usadas en SwiftUI. Una lista hace que mostrar el contenido en forma de tabla o en filas desplazables sea fácil.
Los items de una lista pueden ser seleccionados por el usuario para mostrar más detalles. iOS añade un disclosure indicator, que está muy bien para mostrar al usuario que hay más información si hacen tap en la fila pero a veces tendremos que esconder el disclosure indicator.
En este artículo aplicaremos una solución a este problema.
Qué es un disclosure indicator
Un disclosure indicator es un chevron que apunta en la dirección de salida. Este accesorio aparece en el borde de salida de la celda. Utiliza este accesorio de celda para indicar que los usuarios pueden tocar la celda para revelar contenido adicional.
Si tenemos el siguiente código fuente en Swift en el archivo ContentView:
struct ContentView: View {
var body: some View {
NavigationStack{
List(articles) { article in
NavigationLink(destination: ArticleDetailView(article: article)){
ArticleRow(article: article)
}
.listRowSeparator(.hidden)
}
.listStyle(.plain)
.navigationTitle("Swift Developers")
}
}
}Con esta estructura:
struct ArticleRow: View {
var article: Article
var body: some View {
VStack(alignment: .leading, spacing: 6) {
Image(article.image)
.resizable()
.aspectRatio(contentMode: .fit)
.cornerRadius(5)
Text(article.title)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
.lineLimit(3)
.padding(.bottom, 0)
Text("By \(article.author)".uppercased())
.font(.subheadline)
.foregroundColor(.secondary)
.padding(.bottom, 0)
HStack(spacing: 3) {
ForEach(1...(article.rating), id: \.self) { _ in
Image(systemName: "star.fill")
.font(.caption)
.foregroundColor(.yellow)
}
}
Text(article.excerpt)
.font(.subheadline)
.foregroundColor(.secondary)
}
}
}Y nuestra vista ArticleDetailView.swift es la siguiente:
struct ArticleDetailView: View {
var article: Article
var body: some View {
ScrollView{
VStack(alignment: .leading){
Image(article.image)
.resizable()
.aspectRatio(contentMode: .fit)
Group{
Text(article.title)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
.lineLimit(3)
Text("By \(article.author)".uppercased())
.foregroundStyle(.secondary)
}
.padding(.bottom, 0)
.padding(.horizontal)
Text(article.content)
.font(.body)
.padding()
.lineLimit(1000)
.multilineTextAlignment(.leading)
}
}
}
}En XCode tendremos el siguiente resultado:
Escondiendo el disclosure indicator
SwiftUI no ofrece una opción directa para desactivar u ocultar el disclosure indicator. Para solucionar este problema, no aplicaremos NavigationLink directamente a la fila del artículo. En su lugar, crearemos un ZStack con dos capas. Actualicemos el NavigationStack de ContentView de la siguiente manera:
struct ContentView: View {
var body: some View {
NavigationStack{
List(articles) { article in
ZStack{
ArticleRow(article: article)
NavigationLink(destination: ArticleDetailView(article: article)){
EmptyView()
}
.opacity(0)
.listRowSeparator(.hidden)
}
}
.listStyle(.plain)
.navigationTitle("Swift Developers")
}
}
}La capa inferior representa la fila del artículo, mientras que la capa superior es una vista vacía. Al aplicar NavigationLink a la vista vacía, evitamos que iOS muestre el disclosure indicator. Una vez que realices este cambio, el disclosure indicator desaparecerá y seguirá permitiendo la navegación a la vista de detalles.
El resultado en XCode es el siguiente, con el disclosure indicator escondido:
