In this article we will see how we can hide the disclosure indicator in SwiftUI. A list is one of the most used views in SwiftUI. A list makes it easy to display content in a table or scrollable row.
Items in a list can be selected by the user to show more details. iOS adds a disclosure indicator, which is great for showing the user that there is more information if they tap on the row but sometimes we will need to hide the disclosure indicator.
In this article we will apply a solution to this problem.
What is a disclosure indicator
A disclosure indicator is a chevron that points in the exit direction. This prop appears on the trailing edge of the cell. You use this cell prop to indicate that users can tap the cell to reveal additional content.
For example, if we have the following source code in Swift in the ContentView file:
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")
}
}
}With this struct:
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)
}
}
}And our ArticleDetailView.swift view is as follows:
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)
}
}
}
}In XCode we will have the following result:
Hiding the disclosure indicator
SwiftUI does not offer a direct option to disable or hide the disclosure indicator. To fix this, we will not apply NavigationLink directly to the article row. Instead, we will create a ZStack with two layers. Let’s update the ContentView’s NavigationStack as follows:
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")
}
}
}The bottom layer represents the article row, while the top layer is an empty view. By applying NavigationLink to the empty view, we prevent iOS from displaying the disclosure indicator. Once you make this change, the disclosure indicator will disappear and still allow navigation to the detail view.
The result in XCode is as follows, with the disclosure indicator hidden:
