I was wondering how to provide an empty state view in a list when the data source of the list is empty. Below is an example, where I have to wrap it in an if/else
statement. Is there a better alternative for this, or is there a way to create a modifier on a List
that'll make this possible i.e. List.emptyView(Text("No data available..."))
.
import SwiftUI
struct EmptyListExample: View {
var objects: [Int]
var body: some View {
VStack {
if objects.isEmpty {
Text("Oops, loos like there's no data...")
} else {
List(objects, id: \.self) { obj in
Text("\(obj)")
}
}
}
}
}
struct EmptyListExample_Previews: PreviewProvider {
static var previews: some View {
EmptyListExample(objects: [])
}
}
For iOS 17 you can use ContentUnavailableView:
ContentUnavailableView(
"Favourite list empty",
systemImage: "star",
description: "Add new item to favourite list")
)
if you want you can add a foregroundStyle and all text and image are going to have a different color from the same color:
ContentUnavailableView(
"Favourite list empty",
systemImage: "star",
description: "Add new item to favourite list")
)
.foregroundStyle(.blue)
if you want to add an action you can do the code below:
ContentUnavailableView {
Label("Favourite list empty", systemImage: "star")
} description: {
Text("Add new item to favourite list")
} actions: {
Button("Tap here") {
// add the action here
}
.buttonStyle(.borderedProminent)
}
The usage can be found here: https://www.avanderlee.com/swiftui/contentunavailableview-handling-empty-states/ Thank you @Amos